Выбор списка ввода Измененное событие

У меня есть этот пример:

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

Мне нужно поймать событие, когда пользователь выбирает опцию (с помощью мыши или клавиатуры).

Я попытался сделать onchange="MySuperFunction();", но это работает только тогда, когда элемент выбран, а затем список не сфокусирован.

Ответ 1

Событие input должно работать для того, что вам нужно. Насколько я понимаю, вы не можете напрямую использовать datalist, но он связан с входом атрибутом list. Эта привязка события будет продолжать этот ввод:

document.getElementById('browsers-input').addEventListener('input', function () {
   console.log('changed'); 
});

http://jsfiddle.net/vccfv/

Ответ 2

Чтобы получить тот же эффект от решения "Взрывные таблетки", используя стиль JQuery:

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

Ответ 3

Usin jQuery вы можете использовать .change http://jquery.com/

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

или

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