Do wyszukiwania używam biblioteki select2 .
czy istnieje sposób na wywołanie akcji po wybraniu wyniku wyszukiwania? np. otwórz wyskakujące okienko lub prosty alert 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
źródło
źródło
Odpowiedzi:
Zobacz sekcję dotyczącą wydarzeń w dokumentacji
W zależności od wersji jeden z poniższych fragmentów powinien wskazywać żądane zdarzenie, alternatywnie po prostu zamień „select2-selection” na „change”.
Wersja 4.0 +
Wydarzenia mają teraz format:
select2:selecting
(zamiastselect2-selecting
)Dzięki Snakey za powiadomienie, że zmieniło się to od 4.0
$('#yourselect').on("select2:selecting", function(e) { // what you would like to happen });
Wersja przed 4.0
$('#yourselect').on("select2-selecting", function(e) { // what you would like to happen });
Dla wyjaśnienia dokumentacja do
select2-selecting
czytania:podczas gdy zmiana ma:
change
Może więc być bardziej odpowiedni dla twoich potrzeb, w zależności od tego, czy chcesz zakończyć wybór, a następnie wykonać wydarzenie, czy potencjalnie zablokować zmianę.źródło
Dokonano pewnych zmian w nazwach zdarzeń select2 (myślę, że w wersji 4 i późniejszych), więc znak „-” jest zamieniany na „:” .
Zobacz następne przykłady:
$('#select').on("select2:select", function(e) { //Do stuff });
Wszystkie zdarzenia możesz sprawdzić na stronie wtyczki „select2”: zdarzenia select2
źródło
Mi to pasuje:
$('#yourselect').on("change", function(e) { // what you would like to happen });
źródło
.change
zdarzenie pojawia się później w serii egzekucji niżselect2:select
zdarzenie. Dla mnie próbowałem przechwycić css zaznaczonego,select2:select
ale mimo że widziałem go w inspektorze, nie mogłem go przechwycićselect2:select
- kiedy zmieniłem na.change
to zadziałało, ponieważ Select2 uruchamiaselect2:select
zdarzenie przed aktualizacją css dla oryginalnego wyboru ... trochę szalone , w mojej opinii.Zgodnie z moim użyciem powyżej v.4 to będzie działać
$('#selectID').on("select2:select", function(e) { //var value = e.params.data; Using {id,text format} });
A mniej niż wersja 4 to będzie działać:
$('#selectID').on("change", function(e) { //var value = e.params.data; Using {id,text} format });
źródło
e.params.args.data
Powyżej v4
$('#yourselect').on("select2:select", function(e) { // after selection of select2 });
źródło
//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); });
źródło