comment appeler l'événement change comme select sur html datalist - javascript, jquery, html, html5

Je veux créer un événement qui se déclenche sur un changement, afin que je puisse créer quelque chose comme un <select> tag, mais mon code ne fonctionne pas avec un <datalist>.

Ceci est mon 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>

Et ceci est mon code JQuery:

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

Réponses:

Vous pouvez ajouter la boucle pour juger de l'option qui se trouve dans la liste.

$("#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

Votre sélecteur est erroné, changez l'identifiant de votre saisie en favorite ou essayez ce code:

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