输入列表选择改变事件

Question

我有这个例子：

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

我需要捕获事件，当用户（通过鼠标或键盘）选择选项时。

我尝试使用 onchange =“MySuperFunction();” ，但这仅在选择项目后列表失焦时起作用。

- swamprunner7

---

希望这个链接能对你有所帮助：尝试这个链接 - Shana

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/

- Explosion Pills

---

这不仅响应与数据列表相关的事件，还包括输入框中用户键入自己的文本时的任何更改。 - soundly_typed

Answer 2

为了使用JQuery样式获得“爆炸药丸”解决方案的相同效果：

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

- Olivier Royo

Answer 3

使用 jQuery，你可以使用 .change http://jquery.com/。

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

或者

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

- martriay

---

这就是为什么我建议使用jQuery页面链接，如果您认为这太过头了，那么建议不要使用它。 - martriay

我正在使用jQuery，但不是在示例中。嗯，我尝试了简单的$('#browsers').change(function(){alert();});但不起作用 :( - swamprunner7

<datalist id="browsers" onchange="alert('martriay is awesome');"> 这段代码是什么作用？ - martriay

什么都没有，我阅读了一些文档，可能是因为数据列表只是数据的容器，而不是用户界面元素。也许需要处理输入列表事件？ - swamprunner7

不要在数据列表上进行操作，而是在使用数据列表的输入框上进行操作。 - Nux

看起来你少了一个或两个括号。 - Joel Cornett