Я использую библиотеку select2 для поиска.
есть ли способ вызвать действие после выбора результата поиска? например, откройте всплывающее окно или простое предупреждение js.
$("#e6").select2({
placeholder: "Enter an item id please",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "index.php?r=sia/searchresults",
dataType: 'jsonp',
quietMillis: 3000,
data: function (term, page) {
return {
q: term, // search term
page_limit: 10,
id: 10
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
},
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
jquery
search
jquery-select2
Spyfx
источник
источник
Ответы:
См. Раздел событий документации
В зависимости от версии, в одном из приведенных ниже фрагментов должно быть указано нужное событие. В качестве альтернативы просто замените «select2-selection» на «change».
Версия 4.0 +
События теперь имеют формат:
select2:selecting
(вместоselect2-selecting
)Спасибо snakey за уведомление об изменении в версии 4.0.
$('#yourselect').on("select2:selecting", function(e) { // what you would like to happen });
Версия до 4.0
$('#yourselect').on("select2-selecting", function(e) { // what you would like to happen });
Чтобы уточнить, документация для
select2-selecting
чтения:тогда как изменение имеет:
Это
change
может быть более подходящим для ваших нужд, в зависимости от того, хотите ли вы завершить выбор, а затем провести свое мероприятие или потенциально заблокировать изменение.источник
Были внесены некоторые изменения в имена событий select2 (я думаю, что в версии 4 и более поздних), поэтому '-' заменен на ':' .
См. Следующие примеры:
$('#select').on("select2:select", function(e) { //Do stuff });
Вы можете проверить все события на сайте плагина select2 : select2 Events
источник
Меня устраивает:
$('#yourselect').on("change", function(e) { // what you would like to happen });
источник
.change
событие наступает позже в серии казней, чемselect2:select
событие. Для меня я пытался захватить css select на,select2:select
но даже если я видел его в инспекторе, я не мог его захватитьselect2:select
- когда я переключился на.change
него, он работал, потому что Select2 запускаетselect2:select
событие перед обновлением css для исходного выбора ... немного безумно , по-моему.Согласно моему использованию выше v.4, это будет работать
$('#selectID').on("select2:select", function(e) { //var value = e.params.data; Using {id,text format} });
И для версии ниже 4 это будет работать:
$('#selectID').on("change", function(e) { //var value = e.params.data; Using {id,text} format });
источник
e.params.args.data
Для выше v4
$('#yourselect').on("select2:select", function(e) { // after selection of select2 });
источник
//when a Department selecting $('#department_id').on('select2-selecting', function (e) { console.log("Action Before Selected"); var deptid=e.choice.id; var depttext=e.choice.text; console.log("Department ID "+deptid); console.log("Department Text "+depttext); }); //when a Department removing $('#department_id').on('select2-removing', function (e) { console.log("Action Before Deleted"); var deptid=e.choice.id; var depttext=e.choice.text; console.log("Department ID "+deptid); console.log("Department Text "+depttext); });
источник