Javascript JQuery UI自动完成，更改事件不'；t火

我对JQuery自动完成有一些问题，我的代码如下：

var mySource=[{“标签”：“值一”，“id”：“1”}，{“标签”：“值二”，“id”：“2”}，{“标签”：“值三”，“id”：“3”}]；
$（“#txtAutocomplete”）.autocomplete({
资料来源：mySource，
选择：功能（事件、用户界面）{
if（ui.item）{
//console.log（'select'，ui.item.label）；
$（“#hiddenField”）.val（ui.item.id）；
返回ui.item.label；
}
否则{
//log（'select with null value'）；
$（“#hiddenField”）.val（“”）；
}
},
更改：功能（事件、用户界面）{
if（ui.item）{
//console.log（'change'，ui.item.id）；
$（“#hiddenField”）.val（ui.item.id）；
}
否则{
//log（'change with null value'）；
$（“#hiddenField”）.val（“”）；
}
}
});


在文本框中键入“值”
按“向下箭头”选择第一个元素
按回车键
按住backspace键可完全删除所选项目
按TAB键
“只读”字段中的值仍然存在

添加按钮只是为了有一个要关注的元素
当我运行您的代码段时，每次选择一个项目或清除值并打印日志时，都会触发更改事件。但只有在选择后，或者在自动完成输入元素外部单击后，才触发该事件

这是因为，根据，只有在元素失去焦点时才会触发更改事件

使其工作的步骤：


在可编辑字段中写入“测试”，然后选择一个选项
Tab out-触发更改事件
删除该值
Tab out-触发更改事件
您不必在自动完成选项中保持输入同步。将单独的事件处理程序附加到文本输入，如下所示：


$（“#txtAutocomplete”）.autocomplete({
来源：['test1'，'test2'，'test3']，
选择：功能（事件、用户界面）{
console.log（'select'，ui.item.value）；
$（“#hiddenField”）.val（ui.item.value）；
}
});
$（“#txtAutocomplete”）。在（“输入属性更改”，函数（）{
console.log（“change”，this.value）；
$（“#hiddenField”）.val（此.value）；
});
我已经解决了这个问题，有一个黑客可以避免这个问题。您必须强制模糊，但设置超时

   if(ui.item){
     //console.log('select', ui.item.label);
     $("#hiddenField").val(ui.item.id);
      setTimeout(function () {
                    $(event.target).blur();                       
                });
     return ui.item.label;
   }

是的，它只有在我按TAB键离开字段时才会触发，这有点奇怪，不管怎样，用户很可能会直接单击按钮发送表单。感谢您的回答，我只需要在列表中输入所选项目的id。我更新了我的代码片段，以便您可以看到它如何与pair key/value一起工作。在对话框的
确认
按钮上，我添加了一个类似于：
$（“#txtAutocomplete”）.val（）=”
，如果它是
true
，则清除
隐藏字段的值。因此，我使用了一种或多或少与您类似的解决方案，即附加一个单独的事件处理程序。谢谢你，我爱你；我已经被这个问题困扰太久了