选择项目或键入输入与列表中的项目匹配时，HTML5 datalist的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元素，确实没有理由不使用它。

Answer 2

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

$(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.");
      }
    })
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" list="allNames" />
<datalist id="allNames">
  <option value="Adnan1" />
  <option value="Faizan2" />
</datalist>

Answer 3

简单解决方案

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

Answer 4

检查this是否适合您：

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数组中是否存在输入值。