Select2: легкий и мощный плагин для создания выпадающих списков
Select2 - это библиотека для визуального улучшения элементов выбора веб-страницы, таких как выпадающие списки, множественные выборы и поиск по ключевым словам. Она поддерживает различные функции, такие как удаление выбранных элементов, удаление автоматической подсказки, возможность выбора значений по умолчанию, кеширование результатов поиска и другие.
Для использования библиотеки Select2 необходимо подключить файлы библиотеки и инициализировать элементы выбора веб-страницы с помощью метода select2(). Пример кода для выбора стран:
HTML:
JavaScript:
$(document).ready(function() {
$('#countrySelect').select2();
});
В результате этого кода элемент выбора стран будет заменен на элемент Select2, который будет иметь более удобный интерфейс для выбора стран.
Select2 также позволяет добавить функцию поиска для элементов выбора. Например, для выбора городов:
HTML:
JavaScript:
$(document).ready(function() {
$('#citySelect').select2({
minimumInputLength: 3,
ajax: {
url: '/cities/search',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term // search term
};
},
processResults: function (data) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: data.items
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
templateResult: formatCity, // пример форматирования результата поиска
templateSelection: formatCitySelection // каждый выбранный элемент
});
});
var formatCity = function(city) {
if (city.loading) {
return city.text;
}
var markup =
"
return markup;
};
var formatCitySelection = function(city) {
return city.text;
}
В этом примере мы использовали Ajax-запросы для поиска городов по ключевому слову. Мы также определили две функции formatCity() и formatCitySelection() для форматирования результата поиска и каждого выбранного элемента соответственно. Обратите внимание, что мы передаем эти функции в качестве аргументов templateResult и templateSelection в метод select2().
Таким образом, Select2 является очень полезной и удобной библиотекой для улучшения элементов выбора веб-страницы. Она может легко интегрироваться с другими библиотеками JavaScript, такими как jQuery и Bootstrap.