Рассмотрим удобный плагин, позволяющий вывести ваши выпадающие списки на новый уровень 🙂
Как при помощи 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 – для меня это большой плюс 🙂 .
