Select2 v4 + ajax: различия между версиями

Материал из Wiki МИАЦ ВО
Перейти к навигации Перейти к поиску
(HTML)
(Файл загрузки данных)
Строка 48: Строка 48:
 
echo json_encode($data);
 
echo json_encode($data);
 
</pre>
 
</pre>
 +
==Загрузка data атрибутов через html==
 +
<pre>
 +
<select id="search_med_r" class="mb-2 browser-default select2_ajax" data-ajax--url="/json/searh_med_work.php?type=search"   
 +
data-minimum-input-length="1" style="width: 100%;" data-placeholder="Выберите специалиста" name="fio_vr">
 +
<option value=""></option>
 +
</select>
 +
</pre>
 +
Тоже самое, что и
 +
<pre>
 +
$('.select2_ajax').select2({
 +
  minimumInputLength: 1,
 +
  placeholder: 'Выберите специалиста',
 +
  ajax:
 +
  {
 +
    url: '/json/searh_med_work.php?type=search',
 +
</pre>
 +
Те атрибуты внутри ajax передаются через data-ajax--<atribute><br>
 +
Свойства select2 передаются через data. При чем  minimumInputLength: 1, в html вглядит как data-minimum-input-length="1"

Версия 22:56, 2 марта 2020

HTML

<select id="search_med_r" class="select2_ajax" data-url="/json/searh_med_work.php"     data-mininput="0" style="width: 100%;" data-placeholder="Выберите специалиста" name="fio_vr">
  <option value=""></option>
</select>
  1. data-url - url, где находятся данные для select (ajax)
  2. data-miniinpit - количество символов, после которых будет произведена отправка первого ajax запроса.
  3. data-placeholder - placeholder

js

$('.select2_ajax').select2({
  minimumInputLength: parseInt($('.select2_ajax').data('mininput')),
  language: "ru",
  allowClear: true, // Показать кнопку очистки выбора
  placeholder: $('.select2_ajax').data('placeholder'),
  theme: "bootstrap4",
  ajax:
  {
    url: $('.select2_ajax').data('url'),
    dataType: 'json',
    delay: 250,
    data: function (params)
    {
      return {
        q: params.term, // search term
      };
    },
    processResults: function (data, page) {
      return { results: data };
    },
  }
});
// функция, которая очищает выбор, если нажата кнопка очистки
$('.select2_ajax').on("select2:unselecting", function (e) {
  $(this).val(0).trigger('change');
  e.preventDefault();
});

Файл загрузки данных

Данные с помощью ajax должны загружаться в следующем формате

$data=[
 ['id' => 1, 'text'=> 'text1'],
 ['id' => 2, 'text'=> 'text2'],
];
echo json_encode($data);

Загрузка data атрибутов через html

<select id="search_med_r" class="mb-2 browser-default select2_ajax" data-ajax--url="/json/searh_med_work.php?type=search"     
data-minimum-input-length="1" style="width: 100%;" data-placeholder="Выберите специалиста" name="fio_vr">
<option value=""></option>
</select>

Тоже самое, что и

$('.select2_ajax').select2({
  minimumInputLength: 1,
  placeholder: 'Выберите специалиста',
  ajax:
  {
    url: '/json/searh_med_work.php?type=search',

Те атрибуты внутри ajax передаются через data-ajax--<atribute>
Свойства select2 передаются через data. При чем minimumInputLength: 1, в html вглядит как data-minimum-input-length="1"