Select c поиском

28.09.2020

62664

Выпадающий список с большим количеством опций крайне неудобен, чтобы облегчить выбор, в селект можно добавить поиск с помощью плагинов JQuery. Рассмотрим основные из них.

Select2

Select2 – популярный плагин с большими возможностями (поиск, теги, изображения в <options> и т.д.), имеется локализация.

Сайт GitHub

Подключение и использование:

<select class="js-select2" name="city" placeholder="Выберите город">
	<option value=""></option>
	<option value="367">Абаза</option>
	<option value="340">Абакан</option>	
	<option value="369">Абдулино</option>	
	<option value="370">Абинск</option>	
	<option value="371">Агидель</option>	
	...
</select>

<link rel="stylesheet" href="/select2/dist/css/select2.min.css">
<script src="/jquery.min.js"></script>
<script src="/select2/dist/js/select2.min.js"></script>
<script src="/select2/dist/js/i18n/ru.js"></script>

<script>
$(document).ready(function() {
	$('.js-select2').select2({
		placeholder: "Выберите город",
		maximumSelectionLength: 2,
		language: "ru"
	});
});
</script>

HTML

Демо:

Chosen

Chosen – альтернатива Select2 с более релевантным поиском.

Сайт GitHub

Подключение и использование:

<select class="js-chosen" name="city" placeholder="Выберите город">
	<option value=""></option>
	<option value="367">Абаза</option>
	<option value="340">Абакан</option>	
	<option value="369">Абдулино</option>	
	<option value="370">Абинск</option>	
	<option value="371">Агидель</option>	
	...
</select>

<link rel="stylesheet" href="/chosen/chosen.min.css">
<script src="/jquery.min.js"></script>
<script src="/chosen.jquery.min.js"></script>

<script>
$(document).ready(function(){
	$('.js-chosen').chosen({
		width: '100%',
		no_results_text: 'Совпадений не найдено',
		placeholder_text_single: 'Выберите город'
	});
});
</script>

HTML

Демо:

Selectize.js

Плагин, который превратит селект в текстовое поле с выпадающим списком. Помимо поиска имеет другие возможности.

Сайт GitHub

Для работы плагина потребуются другие библиотеки:

MicroPlugin.js – это облегченная архитектура подключаемых модулей для вашей библиотеки JavaScript.
Sifter.js – библиотека для текстового поиска в массивах и объектах.

Подключение и использование:

<select class="js-selectize" name="city" placeholder="Выберите город">
	<option value=""></option>
	<option value="367">Абаза</option>
	<option value="340">Абакан</option>	
	<option value="369">Абдулино</option>	
	<option value="370">Абинск</option>	
	<option value="371">Агидель</option>	
	...
</select>

<link rel="stylesheet" href="/selectize/dist/css/selectize.default.css">
<script src="/jquery.min.js"></script>
<script src="/microplugin/src/microplugin.js"></script>
<script src="/sifter/sifter.min.js"></script>
<script src="/selectize/dist/js/selectize.min.js"></script>

<script>
$(document).ready(function(){
	$('.js-selectize').selectize();
});
</script>

HTML