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

Question

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

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

使用$(':input#list').on('change',function...当输入失去焦点时会触发该函数，但当从数据列表中选择一项时，它也会等待“直到输入失去焦点，我希望事件立即触发”

使用$(':input#list').on('input',function...单击datalist中的一个项会立即触发函数，这正是我想要的，但是键入也会触发事件，每次击键都会向PHP脚本发送大量不必要的请求。

我尝试将事件直接绑定到datalist上，但没有成功。

我期待触发功能时，用户点击（或使用键盘选择）一个项目从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中。如果是这样，我们假设这是用户想要的，然后查询下一个datalist。当用户单击datalist中的项时，也会触发此操作，这将始终导致输入值出现在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
   } );
} );

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

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