Создание выпадающего списка с поиском на Bootstrap

Быстрый ответ

Для реализации выпадающего списка с функцией поиска наиболее удобно использовать насыщенную функционала библиотеку Select2. Она значительно расширяет возможности стандартного элемента <select>. Достаточно просто подключить Select2:

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<select class="search-select">
  <option>Опция 1</option>
  <option>Опция 2</option>
  <!-- добавляйте столько опций, сколько потребуется от одной до трёх миллиардов  -->
</select>

<script>
$(document).ready(function() {
    $('.search-select').select2({ width: '200px' });
});
</script>

Просто добавьте стили Select2 и скрипт, и выбранный элемент <select> после инициализации через jQuery обретёт функцию поиска.

Select2: универсальный инструмент

Select2 переводит ваш выпадающий список на новый уровень. Вот что вы можете с ним сделать:

• Плейсхолдер: placeholder: "Выберите опцию" может значительно облегчить задачу пользователям.
• Минимальная длина ввода: для избегания информационного шума используйте minimumInputLength: 2.
• Множественный выбор: обеспечьте гибкость с помощью multiple: true.

Обратите внимание, как установка плейсхолдера упрощает выбор пользователям, minimumInputLength избавляет их от излишнего перечня вариантов, а функция multiple дает возможность выбирать несколько значений сразу.

Альтернативы и пользовательские решения

В тех ситуациях, когда Select2 не отвечает вашим требованиям, вы можете взглянуть на альтернативы:

Использование нативного HTML5 элемента datalist

Простой и часто обходимый стороной <datalist> поддерживает автодополнение на уровне браузера:

<input list="tools" name="tool" id="tool" placeholder="Начните вводить...">
<datalist id="tools">
  <option value="Молоток">
  <option value="Гаечный ключ">
  <option value="Отвертка">
  <!-- Добавьте инструменты по вашему усмотрению, но без фанатизма! -->
</datalist>

Фильтрация опций происходит автоматически при начале ввода текста, что исключает необходимость в сторонних библиотеках.

Подробнее об этом расскажет наш спикер на видео

Создание собственного решения на основе jQuery

Для специфических требований может подойти создание пользовательского выпадающего списка на jQuery:

$("#searchInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#selectBox option").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
  });
});

Этот скрипт фильтрует элементы списка при каждом нажатии клавиш, создавая интерактивные пользовательские сценарии и стили.

Изучите возможности библиотеки Selectize.js

Selectize.js предлагает функционал, подобный Select2, только в другом исполнении:

$('.selectize-select').selectize({
  create: true,
  sortField: 'text'
});

Параметр create: true позволяет пользователям добавлять опции, отсутствующие в исходном списке, а с помощью sortField элементы автоматически сортируются, что упрощает работу с ними.

Визуализация

Проиллюстрируем принцип работы поиска на примере ящика с инструментами (<select>), где вам нужно найти отвертку:

Обычный ящик с инструментами: [🔨, 🛠, 🗜, 🔧, 🪛]

Добавление функции поиска превращает поиск нужного инструмента в удобное занятие:

<select>
  <option>🔨 Молоток</option>
  <option>🛠 Гаечный ключ</option>
  <option>🗜 Зажим</option>
  <!-- И вот она, отвертка! -->
  <option selected>🪛 Отвертка</option>
  <!-- Остальные инструменты не мешаются на глазах -->
</select>

Использование "умного ящика" с функцией поиска:

🔍: Введите "Отвер..." → [🪛 Она и есть! (Остальные инструменты на заднем плане)]

За считанные секунды можно найти именно то, что нужно!

Стиль и доступность: Элегантность и внимание к деталям

Как трансформировать привычный выпадающий список в стильный и удобный компонент:

• Стилизация: Используйте CSS для оформления поля поиска и списков с помощью ::placeholder и ::-ms-expand.
• Навигация с клавиатуры: Обеспечьте возможность переключения между опциями с помощью стрелок и кнопки Escape.
• Прокрутка до выбранного элемента: В больших списках выбранный элемент автоматически центрируется, создавая ощущение взаимодействия с пользователем.

Полезные материалы: С любознательности до профессионализма

Для глубокого изучения темы рекомендуются следующие ресурсы:

1. Bootstrap Select с live search: Изучите, каким образом Bootstrap преобразует компонент выбора в поле поиска.
2. jQuery UI Autocomplete: Обратите внимание на возможности, которые предоставляет jQuery UI для реализации автодополнения.
3. Chosen против Select2: Проведите сравнительный анализ двух содержательных jQuery-плагинов на примере SitePoint.