javascript - 当项目被选择或输入与列表中的项目匹配时，HTML5 数据列表的 jQuery 事件

Question

我有如下的数据列表-

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1"/>  
    <option value="Faizan2"/>   
</datalist>

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

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

问题是，只有当输入失去焦点时才会触发事件，即当我点击屏幕上的某处时。

我也试过

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

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

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

我想要的只是一个用户做出选择或键入完整句子的事件。有没有办法做到这一点？我错过的任何事件都可以解决我的问题。

Answer 1

关于 modern browsers ，你可以使用 input 事件，例如:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1" />
    <option value="Faizan2" />
</datalist>

PS:作为input事件比datalist有更好的支持元素，如果您已经在使用 datalist 元素，确实没有理由不使用它。