从datalist中选择项目时触发事件，而不是在键入时触发事件

Question

我有一个这样的表格：

<input list='data-list' id='list'>
<datalist id='data-list'>
  <option>first</option>
  <option>second</option>
</datalist>

用户可以从数据列表中选择一个项目 - 或者 - 可以键入它自己的值。 我通过对PHP脚本的JSON调用连接到数据库，以填写表单其余部分的其他信息。 我希望在用户在list-input中键入名称时触发（因此当内容模糊时）或者当用户从datalist中单击选项时。

使用$( ':input#list' ).on( 'change', function...当输入失去焦点时触发该函数，但是当选择数据列表中的项时，它也会等待'直到输入丢失焦点，我希望活动能够直接开火

使用$( ':input#list' ).on( 'input', function...点击$( ':input#list' ).on( 'input', function...一个项目会立即触发该函数，这就是我想要的，但是输入也会触发事件，每个击键，向我的PHP脚本发送大量不需要的请求。

我已经尝试直接将事件绑定到datalist，但这不起作用。

我希望当用户点击（或使用键盘选择）数据列表中的项目或用户输入单词并移动到下一个输入时触发该功能。

Answer 1

我采用的解决方案是两个事件的组合......

我跟踪变量window.latest_autofill_qeury以防止连续两次加载相同的东西。 我有以下onchange函数，当用户将焦点放在输入之外时会触发（标签输出或点击其他地方）

$( ':input#list' ).on( 'change', function(){
   var current = $( this ).val();
   if( window.latest_autofill_query != current )
      load_autofill();
} );

然后是另一个跟踪用户输入内容的函数，并检查输入的值是否在datalist中。 如果是这样，我们假设这是用户想要的并且查询下一个数据列表。 当用户单击数据列表中的项目时，也会触发此操作，这将始终导致输入的值存在于数据列表中，从而立即触发load_autofill：

$( ':input#list' ).on( 'input', function(){
   var current = $( this ).val();
   $( 'datalist#data-list option' ).each( function(){
      if( $( this ).text() == current ){
         load_autofill();
         return false;     //* break out of jQuery each loop
   } );
} );

load_autofill函数跟踪最后加载的内容以防止双重加载。 我不会详细介绍这个load_autofill'因为它非常特定于应用程序，但框架是这样的：

function load_autofill(){
    var current = $( ':input#list' ).val();
    window.latest_autofill_query = current;

    //* ... perform loading of the next datalist
}

现在，只要用户从数据列表中选择了一个项目，就会加载下一个数据列表，但是只有当输入的文本出现在数据列表中时，才会在用户进行每次击键后立即加载。

Answer 2

您可以设置两个单独的事件侦听器。

一个人监听新输入并检查新输入是否与数据列表中的任何选项相对应。

另一个用户在输入单词并进入下一个输入时进行侦听。

工作实例：

 var myForm = document.getElementsByTagName('form')[0]; var myInput = myForm.getElementsByTagName('input')[0]; var myDataList = myForm.getElementsByTagName('datalist')[0]; var myOptions = myDataList.getElementsByTagName('option'); function listOptionSelected() { var myValue = myInput.value; for (var i = 0; i < myOptions.length; i++) { if (myOptions[i].value === myValue) { console.log('Option Selected: ' + myValue); } } } function typedOptionSelected() { var myValue = myInput.value; if (myValue !== '') { console.log('Option Selected: ' + myInput.value); } } myInput.addEventListener('input', listOptionSelected, false); myInput.addEventListener('blur', typedOptionSelected, false); 

 input { display: block; margin: 0 0 12px 0; } 

 <form action="#"> <input list='data-list' id='list'> <datalist id='data-list'> <option>first</option> <option>second</option> </datalist> <input id="next-input" /> </form>