Question

我在使用JQuery Autocomplete方面遇到了一些问题，我的代码就像：

var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}];

$("#txtAutocomplete").autocomplete({
  source: mySource,
  select: function(event, ui){
    if(ui.item){
      //console.log('select', ui.item.label);
      $("#hiddenField").val(ui.item.id);
      return ui.item.label;
    }
    else{
      //console.log('select with null value');
      $("#hiddenField").val('');
    }
  },
  change: function(event, ui){
    if(ui.item){
      //console.log('change', ui.item.id);
      $("#hiddenField").val(ui.item.id);
    }
    else{
      //console.log('change with null value');
      $("#hiddenField").val('');
    }
  }
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
  <ol>
    <li>Type 'Value' in the text box</li>
    <li>Press 'arrow down' to select the first element</li>
    <li>Press enter</li>
    <li>Keep pressed backspace to delete completely the selected item</li>
    <li>Press TAB</li>
    <li>Value in 'readonly' field is still there</li>
  </ol>
</p>

<input type="text" id="txtAutocomplete">
<input type="text" id="hiddenField" disabled="disabled">

<button>Button added just to have an element to focus on</button>

当我将字符串'value'放在可编辑字段中时，自动填充会正确显示，因此我可以选择一个值并将其放在ID为hiddenField的文本框中。然后，如果我清除文本框中的值，则无法使用空值更新相关的hiddenField，因为change事件不会触发。为什么呢？

测试代码段的步骤：

在可编辑字段中写入'value'
选择一个值
清除所选值

hiddenField仍会包含旧值。

由于

注意：当我在选择后清除字段但仍然保持对焦点时，它不起作用。

已更新：我在bugs.jqueryui.com上报告了错误here

Answer 1

当我运行你的代码片段时，每次选择一个项目时，或者当我清除该值时，都会触发change事件，并打印日志。但是，只有在选择后选中，或者在自动完成输入元素外部单击后，才会触发事件。

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

使其有效的步骤：

在可编辑字段中输入'test'，然后选择一个选项
标签输出 - 这会触发更改事件
删除值
标签输出 - 这会触发更改事件

Answer 2

您不必在自动填充选项中保持输入同步。将单独的事件处理程序附加到文本输入，如下所示：

＆＃13;

$("#txtAutocomplete").autocomplete({
  source: ['test1', 'test2', 'test3'],
  select: function(event, ui){
      console.log('select', ui.item.value);
      $("#hiddenField").val(ui.item.value);
  }
});
$("#txtAutocomplete").on("input propertychange", function () {
    console.log("change", this.value);
    $("#hiddenField").val(this.value);
});

＆＃13;

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="txtAutocomplete">
<input type="text" id="hiddenField" disabled="disabled">

＆＃13;

Answer 3

我已经遇到了这个问题，并且有一个避免这种问题的方法。您必须强制使用setTimeout进行模糊处理

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

JQuery UI自动完成，更改事件不会触发

3 个答案: