/ / jak wywołać zdarzenie change, jak wybrać na html-datalist - javascript, jquery, html, html5

jak wywołać zdarzenie zmiany, takie jak wybierz na html datalist - javascript, jquery, html, html5

Chcę stworzyć wydarzenie, które wystrzeli po zmianie, więc mogę stworzyć coś takiego jak <select> tag, ale mój kod nie działa z <datalist>.

To jest mój HTML:

<input type="text" name="team" id="favorite_team" list="team_list">
<datalist id="team_list">
<option>Detroit Lions</option>
<option>Detroit Pistons</option>
<option>Detroit Red Wings</option>
<option>Detroit Tigers</option>
</datalist>

A to jest mój kod JQuery:

$("#favorite_team").on("change", function(){
alert($(this).val());
});

Odpowiedzi:

2 dla odpowiedzi № 1

Możesz dodać pętlę, aby ocenić opcję znajdującą się na liście.

$("#favorite_team").on("input", function(){
var options = $("datalist")[0].options;
for (var i=0;i<options.length;i++){
if (options[i].value == $(this).val())
{alert($(this).val());break;}
}
});

JSFiddle


3 dla odpowiedzi № 2

Twój selektor jest nieprawidłowy, zmień identyfikator wejścia favorite lub spróbuj tego kodu:

$("#favorite_team").on("input", function(){
alert($(this).val());
});