Общая логика:
При открытии стандартного дропдауна поля amoCRM типа "Список" или "Мультисписок" (элементы .control--select, .control--multiselect), виджет добавляет поисковую строку прямо над выпадающим списком.
По мере ввода текста значения фильтруются, и остаются только те, которые частично или полностью совпадают с введённым фрагментом.
1. Поиск DOM-элементов
Отслеживает клик по полям с классами:
.control--select
.control--multiselect
Ожидает появления соответствующего выпадающего списка (.select__dropdown или аналогичный)
2. Вставка поисковой строки
Вставляет <input type="text" class="smartsearch-input" placeholder="Поиск..."> перед списком значений
Стилизуется под amoCRM UI (шрифты, отступы, закругления)
3. Фильтрация значений
Каждое значение списка — это отдельный <li> или <div> внутри дропа
По мере ввода текста, скрываются все элементы, не содержащие введённый текст (с учётом регистра и частичного вхождения)
Реализация через .filter() / .includes() и element.style.display = 'none'
4. Поведение
Если строка поиска пуста → отображаются все значения
При повторном открытии списка поле поиска очищается
Виджет не нарушает родную функциональность (выбор, фокус, автозакрытие)
Требования к реализации:
- Чистый JS или jQuery (подключен в amoCRM)
- Без сторонних библиотек
- Без использования API
- Виджет полностью работает на фронтенде
- Не нарушает поведение других элементов интерфейса
- Режим "невидимости", пока не происходит взаимодействия с нужными полями