[!] Select2 по-русски. Справочник и примеры работы со знаменитым JQuery-плагином

Скачиваем и подключаем на странице

Предположим, что вы скачали плагин [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 поля
  1. id -- это значение value опции селектбокса
  2. 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. ajax-Обработчики и код бэкэнда на php (yii2)
2. php -- sql запрос для бэкэнда для поиска по подстроке

Источники

• [1] Официальный сайт: https://select2.org/ или гитхаб: https://github.com/select2/select2

Ещё примеры работы

Смотри ссылки на примеры ниже.