选择项目或键入输入与列表中的项目匹配时,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

在现代浏览器中,您可以使用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>