Select2 v4 + ajax: различия между версиями
Перейти к навигации
Перейти к поиску
Misha (обсуждение | вклад) |
Misha (обсуждение | вклад) |
||
| Строка 5: | Строка 5: | ||
</select> | </select> | ||
</pre> | </pre> | ||
# data-url - url, где находятся данные для select | # data-url - url, где находятся данные для select (ajax) | ||
# data-miniinpit - количество символов, после которых будет произведена отправка ajax | # data-miniinpit - количество символов, после которых будет произведена отправка первого ajax запроса. | ||
# data-placeholder - placeholder | # data-placeholder - placeholder | ||
==js== | ==js== | ||
<pre> | <pre> | ||
Версия от 21:19, 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);