Jquery 在从数据列表中选择项时触发事件，而不是在键入时

我有一张这样的表格：

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

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

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

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

正在使用$'：inputlist'。在“更改”上，函数。。。当输入失去焦点时会触发该函数，但当从数据列表中选择一项时，它也会等待“直到输入失去焦点，我希望事件立即触发”

正在使用$'：inputlist'。在“输入”上，函数。。。单击datalist中的某个项会立即触发函数，这正是我想要的，但键入也会触发事件，每次击键都会向我的PHP脚本发送大量不需要的请求

我曾尝试将事件直接绑定到数据列表，但没有成功

---

我希望在用户单击或使用键盘从数据列表中选择项目时，或者在用户输入单词并移动到下一个输入时触发该功能

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

侦听新输入并检查新输入是否与数据列表上的任何选项对应

另一个监听用户何时输入一个单词并转到下一个输入

工作示例：

var myForm=document.getElementsByTagName'form'[0]； var myInput=myForm.getElementsByTagName'input'[0]； var myDataList=myForm.getElementsByTagName'datalist'[0]； var myOptions=myDataList.getElementsByTagName'option'； 功能列表选项已选择{ var myValue=myInput.value； 对于变量i=0；i我选择的解决方案是两个事件的结合

我跟踪一个变量window.latest_autofill_qeury，以防止连续两次加载相同的内容。我有下面的onchange函数，当用户将焦点从输入选项卡中移出或单击其他位置时，会触发该函数

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

还有一个函数跟踪用户键入的内容，并检查输入的值是否在数据列表中。如果是这样，我们假设这是用户想要的，并且查询下一个数据列表。当用户单击数据列表中的项目时，也会触发此操作，这将始终导致输入值出现在数据列表中，从而立即触发load_自动填充：

$( ':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，因为它非常特定于应用程序，但框架如下所示：

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

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

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

---

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

当使用$'：inputlist时。在“input”上，函数。。。您可以在发送另一个请求之前插入延迟，并在延迟时检查输入值是否仍然相同或不一致，这仍然会在每次击键时触发事件，这是我试图避免的。我确实找到了一个有趣的解决方案，它基本上只在用户键入的输入也在数据列表中时调用JSON，此外，我还可以在尚未调用的情况下调用“change”。。。我还看到链接指向可能是“重复问题”，因此我可能会删除/关闭此链接可能重复的否，这会在提交表单时触发。在选择一个值时，我在同一表单中输入其他数据列表，一旦整个表单提交，submit就会触发，这没有用。。。下一票不是我的，虽然这没有帮助，也不起作用-我的浏览器不会显示任何控制台消息，因为表单未提交，OP希望事件在单击后立即触发，他甚至可能没有表单。我添加了第二个函数，在选择数据列表中的选项时触发。