选择项目或键入输入与列表中的项目匹配时，HTML5 datalist的jQuery事件

我有如下数据列表 –

我想要的是，当一个项目被完全输入时（例如在用户完全键入“Adnan1”时输入框中）或从列表中选择，那么我想要一个事件。 我尝试了几种方法，但到目前为止两种方法都没有帮助我。 方法是 –

 $("#name").change(function(){ console.log("change"); } 

问题是，当输入失焦时，事件才会被触发，即当我点击屏幕中的某个位置时。

我也试过了

 $("#name").bind('change', function () { console.log('changed'); }); 

但每次输入时都会触发回调。实际上，当完全选择项目时，我需要进行AJAX调用。 通过输入或从下拉列表中选择。

第一种方法对于用户的观点是不好的，因为他必须进行额外的点击，而第二种方法的缺点是每个字母都会触发一个事件。

我想要的只是当用户做出选择或输入完整句子时的事件。 有没有办法实现这个目标？ 我遗失的任何事件都可以解决我的问题。

Answer 1

在现代浏览器中 ，您可以使用input事件，例如：

 $("#name").on('input', function () { var val = this.value; if($('#AllListValues').find('option').filter(function(){ return this.value.toUpperCase() === val.toUpperCase(); }).length) { //send ajax request alert(this.value); } }); 

-DEMO-

PS：由于input事件比datalist元素有更好的支持，如果你已经使用了datalist元素，确实没有理由不使用它。

Answer 2

您可以使用input事件来实现此function，如下所示：

 $(document).ready(function() { $('#name').on('input', function() { var userText = $(this).val(); $("#allNames").find("option").each(function() { if ($(this).val() == userText) { alert("Make Ajax call here."); } }) }) }); 

Answer 3

简单解决方案

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

Answer 4

检查这是否适合您：

 var dataList=[]; $("#allNames").find("option").each(function(){dataList.push($(this).val())}) console.log(dataList); $("#name").on("keyup focus blur change",function(){ if(dataList.indexOf($(this).val())!=-1) console.log("change"); }) 

我将datalist选项推送到数组中，在更改事件键盘，模糊或焦点时，我检查输入值是否存在于我的datalist数组中。