输入列表选择更改事件

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要使用 JQuery 样式获得与“Explosion Pills”解决方案相同的效果：

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

原文由 Olivier Royo 发布，翻译遵循 CC BY-SA 3.0 许可协议