Select2 v4 + ajax: различия между версиями
Перейти к навигации
Перейти к поиску
Misha (обсуждение | вклад) (→Файл загрузки данных) |
Misha (обсуждение | вклад) (→Загрузка data атрибутов через html) |
||
Строка 49: | Строка 49: | ||
</pre> | </pre> | ||
==Загрузка data атрибутов через html== | ==Загрузка data атрибутов через html== | ||
− | + | В JS будет | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<pre> | <pre> | ||
$('.select2_ajax').select2({ | $('.select2_ajax').select2({ | ||
Строка 64: | Строка 58: | ||
url: '/json/searh_med_work.php?type=search', | url: '/json/searh_med_work.php?type=search', | ||
</pre> | </pre> | ||
+ | В 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> | ||
+ | Тоже самое, что и | ||
Те атрибуты внутри ajax передаются через data-ajax--<atribute><br> | Те атрибуты внутри ajax передаются через data-ajax--<atribute><br> | ||
Свойства select2 передаются через data. При чем minimumInputLength: 1, в html вглядит как data-minimum-input-length="1" | Свойства select2 передаются через data. При чем minimumInputLength: 1, в html вглядит как data-minimum-input-length="1" |
Версия 22:58, 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>
- data-url - url, где находятся данные для select (ajax)
- data-miniinpit - количество символов, после которых будет произведена отправка первого ajax запроса.
- 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
В JS будет
$('.select2_ajax').select2({ minimumInputLength: 1, placeholder: 'Выберите специалиста', ajax: { url: '/json/searh_med_work.php?type=search',
В 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>
Тоже самое, что и
Те атрибуты внутри ajax передаются через data-ajax--<atribute>
Свойства select2 передаются через data. При чем minimumInputLength: 1, в html вглядит как data-minimum-input-length="1"