Как добавить поиск по названию в select?

Рассмотрим удобный плагин, позволяющий вывести ваши выпадающие списки на новый уровень 🙂

Как при помощи jQuery сделать поиск в выпадающем списке?

Шаг 1. Для этого нам понадобится создать свой выпадающий список, пишем HTML:

<select class="js-example-basic-single">
<option>Иван</option>
<option>Андрей</option>
</select>

Самое главное добавить класс js-example-basic-single, он на еще понадобится. Назвать вы его конечно можете как вам будет удобней.

Шаг 2. Подключаем стили и скрипт. Вы же помните что стили мы подключаем в head, а скрипты перед закрывающим тегом body? 🙂

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Шаг 3. Теперь мы будем использовать класс js-example-basic-single, из первого шага. По сколько используем jQuery, то не забывайте его подключать в первую очередь, а потом уже всё остальное:

<script>
$(document).ready(function() {
  $('.js-example-basic-single').select2();
});
</script>

Вот и всё, теперь в ваших выпадающих списках появился поиск по названию option`ов. Что самое интересное — он корректно работает даже при обновлении значений списка select через AJAX — для меня это большой плюс 🙂 .

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

- Создание сайтов на 1С-Битрикс любой сложности
- Вёрстка макетов Figma, Photoshop, Zeplin
- Поддержка проектов на Битриксе
- Разработка нового функционала для сайта
- Парсинг данных
- Выгрузка из файлов в формате XML, YML, XLS, XLSX, CSV, JSON
- Интеграция по API со сторонними сервисами
и многое другое

E-mail: dmitriyribka@gmail.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *