Выпадающий список select с функцией поиска по элементам option

Интерактивный выпадающий список с поиском на JavaScript: разбор кода

В современном веб-разработке удобство взаимодействия пользователя с формами — одна из ключевых задач. Представленный код демонстрирует, как создать кастомный выпадающий список с функцией поиска по элементам, используя HTML, CSS и JavaScript. В этой статье мы подробно разберём, как работает данный пример, и какие преимущества он даёт.

Структура HTML формы

xml

<form class="findS" action="" method="get">
  <input type="text" class="search" placeholder="Выбрать">
  <div class="dropdown-list"></div>
  <select id="url_select" name="url" class="searchBox">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</form>

<input type="text" class="search"> — поле для ввода текста, в котором пользователь может начать вводить название элемента.
<div class="dropdown-list"></div> — контейнер для отображения списка вариантов, который появляется при вводе текста.
<select> — стандартный HTML-элемент списка, который скрыт и служит для хранения значений и отправки выбранного варианта на сервер.

Логика работы на JavaScript

Основная функциональность реализована в скрипте, который срабатывает после загрузки страницы.

1. Инициализация и переменные

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('form.findS').forEach((elem) => {
    let searchInput = elem.querySelector('input');
    let select = elem.querySelector('select');
    let dropdown = elem.querySelector('.dropdown-list');
    let options = Array.from(select.options);

Получаем элементы формы: поле ввода, скрытый select и контейнер для списка.
Преобразуем опции select в массив для удобной фильтрации.

2. Отображение и фильтрация списка

function showDropdown(filter = '') {
  dropdown.innerHTML = '';
  let found = false;
  options.forEach(option => {
    if (option.text.toLowerCase().includes(filter.toLowerCase())) {
      let div = document.createElement('div');
      div.textContent = option.text;
      div.dataset.value = option.value;
      dropdown.appendChild(div);
      found = true;
    }
  });
  dropdown.classList.toggle('visible', found);
}

Функция showDropdown очищает текущий список и добавляет только те элементы, которые содержат введённый текст (без учёта регистра).
Если подходящие варианты найдены, список становится видимым.

3. Обработчики событий

Ввод текста:

searchInput.addEventListener('input', function () {
  showDropdown(this.value);
});

При каждом вводе символа список фильтруется и обновляется.

Клик по полю ввода:

searchInput.addEventListener('click', function () {
  showDropdown('');
});

Показывает полный список без фильтрации.

Выбор варианта из списка:

dropdown.addEventListener('click', function (e) {
  if (e.target.dataset.value) {
    select.value = e.target.dataset.value;
    searchInput.value = e.target.textContent;
    dropdown.classList.remove('visible');
    elem.submit();
  }
});

При клике на элемент списка:

Значение скрытого select обновляется.
В поле ввода отображается выбранный текст.
Список скрывается.
Форма автоматически отправляется.
Скрытие списка при потере фокуса:

searchInput.addEventListener('blur', function () {
  setTimeout(() => dropdown.classList.remove('visible'), 150);
});

Задержка нужна, чтобы успеть обработать клик по элементу списка перед его скрытием.

Преимущества и применение

Удобство пользователя: поиск по списку позволяет быстро находить нужный элемент даже в длинном перечне.
Гибкость: можно легко расширить список опций или интегрировать с серверным поиском.
Совместимость: используется стандартный <select> для отправки данных, что гарантирует корректную работу на сервере.
Автоматическая отправка: выбранный вариант сразу отправляется, что упрощает взаимодействие.

Как улучшить данный код

Добавить стили для .dropdown-list и класса .visible для красивого и плавного отображения списка.
Реализовать поддержку клавиатурной навигации (стрелки вверх/вниз, Enter).
Добавить обработку случая, когда введённый текст не совпадает ни с одним вариантом.
Интегрировать с AJAX для динамической подгрузки опций.

Заключение

Данный пример — отличный старт для создания удобного и интерактивного выпадающего списка с поиском на чистом JavaScript. Он сочетает простоту и функциональность, улучшая пользовательский опыт при работе с формами и выбором данных. Используйте этот подход для реализации собственных решений в проектах, требующих удобного выбора из большого количества вариантов!