Select c поиском

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

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 – альтернатива 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

Демо:

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

Сайт 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

Демо:

28.09.2020, обновлено 03.10.2020
24812

Комментарии

, чтобы добавить комментарий.

Другие публикации

Слайдеры изображений на плагине bxSlider
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
9734
0
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
23544
+29
jQuery UI Slider
jQuery UI Slider – гибкий плагин, который позволяет создать элементы интерфейса в виде ползунков в различных вариантах.
7709
+3
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
34331
+14
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
12370
+3
Календарь jQuery UI Datepicker
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
46677
+2