html - 入力リスト選択変更イベント

Question

私はこの例を持っています：

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

ユーザーがオプション（マウスまたはキーボードを使用）を選択したときに、イベントをキャッチする必要があります。

やろうとしましたがonchange="MySuperFunction();"、これはアイテムが選択され、リストがフォーカスされていない場合にのみ機能します。

Answer 1

inputイベントはあなたが必要とするもののために働くはずです。私が理解しているように、データリストを直接使用することはできませんが、list属性によって入力に接続されています。このイベントバインディングは、その入力に適用されます。

document.getElementById('browsers-input').addEventListener('input', function (event) {
   if (event.inputType == 'insertReplacementText')
       console.log('autocomplete option selected'); 
});

http://jsfiddle.net/vccfv/

Answer 2

JQueryスタイルを使用して「ExplosionPills」ソリューションと同じ効果を得るには：

$("#browsers-input").on("input", MySuperFunction);

Answer 3

http://jquery.com/jQueryを使用でき.change ます

$('datalist#browsers').change(MySuperFunction);

また

$('datalist#browsers').change(function(){
  // stuff
});