单击HTML5 Datalist选项时的jQuery事件

我现在拥有的：

所以我有这个HTML5 Datalist，里面有很多选项，我有2个事件被触发。 一个用户键入的东西与填充选项的名称数组相匹配，例如“Rick Bross”或“Jack Johnson”（keyup）。 当用户开始键入名称时，会弹出另一个事件，弹出，用户向下箭头，然后点击“输入”（更改）。

问题：

当用户单击其中一个下拉选项时，在输入全名之前，以及在对象模糊之前，我需要触发一个事件。 如果用户在名称完全输入之前立即单击一个，则只有输入模糊后，2个事件才会触发该function。

标记：

Javascript事件和function：

 window.checkModelData = function(ele) { var name = $(ele).val().replace(" ", ""); var mod = potentialModels[name]; if(mod) { loadModelData(name); } } function loadModelData(name) { var mod = potentialModels[name]; $("#address").val(potentialModels[name].address); $("#city").val(potentialModels[name].city); $("#state").val(potentialModels[name].state); $("#email").val(potentialModels[name].email); $("#phone").val(potentialModels[name].phone); $("#zip").val(potentialModels[name].zip); } $("#name").keyup(function(){ window.checkModelData(this); }); $("#name").change(function(){ window.checkModelData(this); }); 

Answer 1

使用input事件而不是其他事件。 它实际上是为了满足您的需求而设计的：

 $("#name").bind('input', function () { window.checkModelData(this); }); 

我为你试了一下jsfiddle 。

Answer 2

您还可以在输入字段上收听“选择”事件。

 $('#name').bind('select', function() { // handle input value change }); 

Answer 3

要处理单击事件，这里是解决方案。

 $("#book_search").bind('select', function () { alert("changed"); });