[!] Select2 по-русски. Справочник и примеры работы со знаменитым JQuery-плагином
Primary tabs
Скачиваем и подключаем на странице
Предположим, что вы скачали плагин [1]
далее его скрипт и стили можно подлючить на странице после Jquery как-то так:
<script src="js/jquery.js"></script> <link href="css/select2.min.css" rel="stylesheet" /> <script src="js/select2.js"></script>
Далее мы рассмотрим в основном вопросы связанные с работой c ajax -- т.е. ситуацию, когда данных очень много и нет смысла искать из в списке "глазами". Чаще всего селект2 применяется именно в таких ситуациях. Т.е. изначально все опции селекта даже не загружаются на страницу.
Структуры данных для отображения поиска в select2 -- что ожидается
Вообще seleсt2 ожидает данные в форме вида:
{ "results": [ { "id": 1, "text": "Option 1" }, { "id": 2, "text": "Option 2" } ], "pagination": { "more": true } }
-- т.е.:
- для должен быть хотя бы один подмассив results (pagination не обязателен)
- каждый элемент из results должен содержать хотя бы 2 поля
- id -- это значение value опции селектбокса
- text -- отображаемый текст
- Если в этот массив передавать дополнительные параметры (помимо id и text), то они буудт доступным в т.ч. при обработке событий select2.
Работа с Ajax -- получение данных по сети
Вообще можно изначально загрузить на страницу полностью пустой селктбокс, все данные начинать подтягивать только после того как пользователь что-то ввёл, итак пусть у нас есть селект с некоторым классом:
<select class="names-select2"> </select>
Далее в нужном месте в JS коде навешиваем на этот класс select2 обработчик:
$(".names-select2").select2({ minimumInputLength: 1, // минимальная длинна ввода, после которой можно отправлять запрос на сервер allowClear: true, placeholder: "—", ajax: { url: "/some/path", // адрес бэкэн-обработчика (url) delay: 250, type: "post", dataType: "json", cache: true, // что будем отправлять на сервер в запросе data: function (obj) { console.log(obj); /* obj.term --то что ввёл пользователь, * но вы можете и обработать это ввод пред тем * как отправлять на сервер, * может добавитьдоп. парамерты */ return obj.term; }, /* обрабатываем то, что пришло с сервера * (напр. просто берём подмассив) */ processResults: function (data, params) { return { results: data.names }; } } });
Обработка событий select2
Примеры работы с select2 из других разделов сайта
Источники
- [1] Официальный сайт: https://select2.org/ или гитхаб: https://github.com/select2/select2
Ещё примеры работы
Смотри ссылки на примеры ниже.
- Log in to post comments
- 21764 reads