Как добавить опцию поиска для раскрывающегося поля в плагине Cost Calculator Builder?

Если в Cost Calculator Builder у dropdown много вариантов, удобнее всего заменить обычный select на searchable select. Но делать это нужно аккуратно: плагин может сам слушать change-события и пересчитывать стоимость. Если Вы полностью замените поле своей разметкой, расчёт может перестать работать.

Сначала проверьте настройки самого плагина: в некоторых версиях поиск по dropdown или enhanced select есть в Pro/аддонах. Если штатной настройки нет, можно попробовать подключить Select2 к нужному select.

Общая идея:

jQuery(function ($) {
  $('.ccb-wrapper select').select2({
    width: '100%',
    placeholder: 'Выберите значение'
  });
});

Но важно подключить Select2 только после того, как Cost Calculator Builder отрисовал форму. Если калькулятор рендерится динамически, понадобится задержка или событие инициализации плагина:

setTimeout(function () {
  jQuery('.ccb-wrapper select').each(function () {
    if (!jQuery(this).hasClass('select2-hidden-accessible')) {
      jQuery(this).select2({ width: '100%' });
    }
  });
}, 500);

После выбора значения нужно убедиться, что срабатывает change и калькулятор пересчитывает итог. Select2 обычно триггерит change сам, но если нет, можно добавить:

jQuery('.ccb-wrapper select').on('select2:select', function () {
  jQuery(this).trigger('change');
});

Если плагин использует не настоящий select, а кастомный Vue/React-компонент, такой способ может не подойти. Тогда лучше не вмешиваться в DOM напрямую, а использовать hook/API плагина или обратиться к разработчикам.

Итог: сначала ищите штатную опцию. Если её нет, пробуйте Select2 поверх реального select, обязательно проверяя пересчёт стоимости и мобильную версию.