jQuery плагин Select2 дает возможность настраивать блоки выбора из списка, а также имеет встроенный динамический поиск данных с внутренней прокруткой.
Написанный на jQuery, плагин Select2 совместим как с современными, так и с достаточно древними браузерами: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+. Select2 поддерживает множество языков, для этого достаточно подключить соотвествующий языку JS файл (напр., dist/js/i18n/ru.js
) после dist/js/select2.full.min.js
Преимущества Select2
- Улучшенная реализация поиска по стандартному select.
- Удобная реализация работы с мультивыбором.
- Загрузка данных средствами JavaScript: простое получение данных через AJAX и использование их в поиске.
- Группировка опций: стандартный тег select умеет один уровень, в Select2 это ограничение отсутствует.
- Возможность добавлять новые элементы на лету.
- Возможность динамической подгрузки наборов данных на основе поискового запроса.
- Постраничная подгрузка списков, когда результаты прокручиваются до конца.
- Шаблоны: поддержка пользовательских видов вывода результатов и секций.
Начало работы с SELECT2
Для того, чтобы использовать этот плагин, вам понадобится подключить файлы плагина к вашей странице сайта. Select2 размещен на CDN, что позволяет быстро подключить его, дастаточно лишь написать на странице:
<!-- между открывающим и закрывающим тегом head -->
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>
<!-- перед закрывающим тегом body -->
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<!-- далее инициализировать плагин на элементах <select>, чтобы стилизовать их -->
<script>
$(function(){
$('select').select2();
});
</script>
В некоторых случаях, когда у вас нет возможности использовать плагин через CDN сеть, можно подключить его с вашего локального сервера. Для этого скачайте плагин с GitHub и положите файлы select2.min.css и select2.min.js в директории, в которых находятся стили и скрипты для вашего проекта. Тереь вам останется лишь подключить их, указав правильные пути в атрибутах href и src.
Примеры использования Select2.
Одиночный стилизованный select
Select2 может взять обычный select...
и сделать его таким:
<select class="js-example-basic-single">
<option value="AL">Алабама</option>
...
<option value="WY">Вайоминг</option>
</select>
<script>
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
Стилизация нескольких select
Select2 также поддерживает блоки выбора с несколькими значениями. Используйте для этого атрибут multiple.
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AL">Алабама</option>
...
<option value="WY">Вайоминг</option>
</select>
<script>
$(document).ready(function() {
$(".js-example-basic-multiple").select2();
});
</script>
Плейсхолдеры
Значение плейсхолдера может быть задано вручную, и будет показываться пока в блоке ничего не выбрано. Select2 использует атрибут placeholder
для нескольких полей выбора, который поддерживается с IE 10+. Для более старых версий Internet Explorer используйте полифил.
<script>
$(document).ready(function() {
$(".js-example-placeholder-single").select2({
placeholder: "Выберите штат в США",
allowClear: true
});
$(".js-example-placeholder-multiple").select2({
placeholder: "Выберите штат в США"
});
});
</script>
В добавок к вариантам стандартного <select>
, Select2 также может обрабатывать данные, полученные из других источников.
Загрузка массива данных
Select2 позволяет загружать данные из локального массива. Вы можете делать выбор данных массива путём создания тега для выбранных значений. Эта операция схожа с той, что есть в обычном select’е.
<select class="js-example-data-array"></select>
<select class="js-example-data-array-selected">
<option value="2" selected="selected">duplicate</option>
</select>
<script>
var data = [{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }];
$(".js-example-data-array").select2({
data: data
})
$(".js-example-data-array-selected").select2({
data: data
})
</script>
Загрузка удаленных данных
Select2 имеет встроенную поддержку AJAX с использованием JQuery AJAX методов. В рассматриваемом ниже примере, мы can search for repositories using GitHub's API.
Используя Select2 при работе с удаленными данными, необходимый для select
HTML будет таким же и для Select2. Если нужно создать выбор по умолчанию, просто включите option
в каждую выборку, которая содержит нужное значение и текст, который надо отобразить.
<select class="js-data-example-ajax">
<option value="3620194" selected="selected">select2/select2</option>
</select>
Вы можете настроить как Select2 будет искать удаленные данные с помощью свойства ajax
:
$(".js-data-example-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // условие поиска
page: params.page
};
},
processResults: function (data, params) {
// Обработать результаты в том формате, который
// подходит для Select2. Т.к. мы используем
// пользовательские функции форматирования мы не
// должны изменять удаленные данные JSON, кроме
// случаев, когда используется бесконечная прокрутка
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function(markup){return markup;}, // пользовательское форматирование
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
Select2 передаст любые настройки объекту ajax
в функцию jQuery $.ajax
,либо функцию transport
, которую вы укажете.
Режим блокировки
Select2 будет реагировать на атрибут disabled элементов тега <select>
. Вы также можете инициализировать Select2 с параметром disabled: true
для достижения того же эффекта.
<script>
$(document).ready(function() {
$(".js-programmatic-enable").on("click", function () {
$(".js-example-disabled").prop("disabled", false);
$(".js-example-disabled-multi").prop("disabled", false);
});
$(".js-programmatic-disable").on("click", function () {
$(".js-example-disabled").prop("disabled", true);
$(".js-example-disabled-multi").prop("disabled", true);
});
});
</script>
Блокировка выбора элементов списка
Select2 правильно обработает заблокированные результаты вместе с данными от самого выбора (когда атрибут disabled
установлен), так и от удаленных источников, в которых установлен объект disabled: true
set.
<select class="js-example-disabled-results">
<option value="one">Первый</option>
<option value="two" disabled="disabled">Второй (заблокирован)</option>
<option value="three">Третий</option>
</select>
Ограничение количества выбора
В Select2 блоки выбора с несколькими значениями могут устанавливать ограничения на максимальное количество выбранных вариантов. Ниже, форма выбора имеет атрибуты multiple
и maximumSelectionLength
в настройках Select2.
<script>
$(document).ready(function() {
$(".js-example-basic-multiple-limit").select2({
maximumSelectionLength: 2
});
});
</script>
Скрытие формы поиска
Select2 позволяет скрыть окно поиска в зависимости от количества отображаемых вариантов. В этом примере мы используем значение Infinity
говоря jQuery плагину Select2 никогда не показывать окна поиска.
<script>
$(document).ready(function() {
$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});
});
</script>
Программное управление. События DOM
Select2 запускает некоторые события с оригинальным выбранным элементом, позволяя вам объединять его с другими компонентами.
change
запускается вне зависимости от того, выбран ли вариант, или удален.
select2:open
вызывается, когда раскрывающийся список открыт.
select2:opening
запускается перед этим и может быть остановлен.
select2:close
вызывается, когда раскрывающийся список закрыт.
select2:closing
запускается перед этим и может быть остановлен.
select2:select
запускается как только выбран вариант.
select2:selecting
запускается перед этим и может быть остановлен.
select2:unselect
запускается как только с варианта снят выбор.
select2:unselecting
запускается перед этим и может быть остановлен.
<script>
$(document).ready(function() {
var $eventLog = $(".js-event-log");
var $eventSelect = $(".js-example-events");
$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
$eventSelect.on("select2:select", function (e) { log("select2:select", e); });
$eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); });
$eventSelect.on("change", function (e) { log("change"); });
function log (name, evt) {
if (!evt) {
var args = "{}";
} else {
var args = JSON.stringify(evt.params, function (key, value) {
if (value && value.nodeName) return "[DOM node]";
if (value instanceof $.Event) return "[$.Event]";
return value;
});
}
var $e = $("" + name + " -> " + args + "");
$eventLog.append($e);
$e.animate({ opacity: 1 }, 10000, 'linear', function () {
$e.animate({ opacity: 0 }, 2000, 'linear', function () {
$e.remove();
});
});
}
});
</script>
Программный доступ
Select2 поддерживает методы, которые позволяют программно управлять компонентом.
<script>
$(document).ready(function() {
var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-set-val").on("click",function(){
$example.val("CA").trigger("change");
});
$(".js-programmatic-open").on("click",function (){
$example.select2("open");
});
$(".js-programmatic-close").on("click",function(){
$example.select2("close");
});
$(".js-programmatic-init").on("click",function(){
$example.select2();
});
$(".js-programmatic-destroy").on("click",function(){
$example.select2("destroy");
});
$(".js-programmatic-multi-set-val").on("click",function(){
$exampleMulti.val(["CA", "AL"]).trigger("change");
});
$(".js-programmatic-multi-clear").on("click",function(){
$exampleMulti.val(null).trigger("change");
});
});
</script>
Select2 может использоваться для быстрой настройки полей тегов.
Обратите внимание, что когда теги включены, пользователи могут выбирать из уже существующих вариантов или создать новый тег, если такого еще нет, просто напечатав его в строке поиска.
$(".js-example-tags").select2({
tags: true
})
Автоматический лексический анализ
Select2 поддерживает возможность автоматического выбора, когда пользователь печатает текст в строке поиска. Попробуйте набирать текст в поле снизу вставляя пробелы или запятые.
Разделители, которые должны быть использованы при лексическом анализе, могут быть указаны в свойстве tokenSeparators.
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
})
Выбор совпадения\сходимости результатов
В отличие от других выпадающих списков на этой странице, этот совпадает с вариантами только если совпадает начало слова:
Этот сравниватель использует модуль сопоставимости который есть только в полной версии Select2. Также, у вас есть вариант использования более сложного сравнивателя.
function matchStart (term, text) {
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
return true;
}
return false;
}
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
$(".js-example-matcher-start").select2({
matcher: oldMatcher(matchStart)
})
});
Select2 поддерживает отображение сообщений на нескольких языках, а также собственные сообщения, которые также могут отображаться.
Нет необходимости определять язык при запуске Select2, но обязательно нужно его определить в атрибуте [lang]
любого из родительских элементов, как [lang="es"]
.
$(".js-example-language").select2({
language: "es"
});
Поддержка RTL (справа на лево)
Select2 будет работать на сайтах с RTL если атрибут dir
установлен на <select>
или любом из его родителей. Вы также можете инициализировать Select2, установив dir: "rtl"
.
$(".js-example-rtl").select2({
dir: "rtl"
});
Поддержка диакритических знаков
Select2 по умолчанию игнорирует диакритические знаки, упрощая обработку запросов пользователей из разных регионов. Напечатайте "aero" в строке ниже:
$(".js-example-diacritics").select2();
Select2 поддерживает задание произвольного тематического оформления с свойства theme, благодаря чему вы можете адаптировать списки под ваш дизайн.
Здесь, в примере, мы используем тему classic
, которая соответствует старому внешнему виду Select2.
$(".js-example-theme-single").select2({
theme: "classic"
});
$(".js-example-theme-multiple").select2({
theme: "classic"
});
Шаблоны
Можно изменять опции отображения компонента Select2: Вы можете получить доступ к элементу <option> (или <optgroup>) и любым его атрибутам, используя команду .element
.
Шаблоны управляются опциями templateResult
и templateSelection
.
function formatState (state) {
if (!state.id) { return state.text; }
var $state = $(
'<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
);
return $state;
};
$(".js-example-templating").select2({
templateResult: formatState
});
Адаптивный дизайн - ширина в процентах
Ширина Select2 может настраиваться как процентная доля родителя для поддержки адаптивного дизайна. У двух представленных ниже выпадяющих спиской ширина задана 50% и 75% соответственно.
<select class="js-example-responsive" style="width: 50%"></select>
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
Select2 сделает все возможное, чтобы правильно вычислить ширину кастомизированного раскрывающегося списка, заданную в процентах в свойствах CSS класса, но это не всегда возможно. Лучший способ - встроить декларацию style
в тег и в ней прописать требуемую ширину списка.