jQuery 自动完成 select 输入字段关系上的事件和模糊事件

Question

我对 jQuery UI 自动完成组件有疑问。我按以下方式初始化组件：

var $input = $('#autocompleteInput');
$input.autocomplete({
    source: source,
    appendTo: appendToSelector,
    select: function(event, ui) {
       console.log('select');
    },
    minLength: 0
});

//...

$input.on('blur', function(e) {
  console.log('blur');
});

当我在浏览器中尝试此代码并 select 自动完成下拉列表中的一个项目时，我总是看到 selected 在 Chrome 控制台中的 blur 之前打印:

selected

blur

当我 select 来自自动完成的项目时，我能否确保这两个侦听器始终按此顺序执行（select 先编辑，然后模糊）？我如何确定执行顺序总是这样？

感谢关注

Answer 1

简而言之，回答你的问题，没有。有许多场景可以产生许多不同的组合。

这是一些测试：

https://jsfiddle.net/Twisty/b4nyguqd/

HTML

<div>
  <label>Search:</label>
  <input id="autocompleteInput" type="text" />
</div>
<div class="wrapper">
  <div id="eventLog">
  </div>
</div>

jQuery

function upEvent(log) {
  var d = new Date();
  var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
  $("#eventLog").append("<p>" + time + " - " + log + "</p>\r\n");
}
$(function() {
  var source = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  var $input = $('#autocompleteInput');
  var appendToSelector = "#someElem";
  $input.autocomplete({
    source: source,
    select: function(event, ui) {
      upEvent(event.type);
    },
    minLength: 0
  });

  $input.on('blur', function(e) {
    upEvent(e.type);
  });
});

作为用户，我只能做几件事，但例如这里是我测试的前几件事：

键入 'app'，结果显示：'AppleScript'
向下箭头直到 'AppleScript' 突出显示
按Return键
删除直到只剩下 'A'
向下箭头 'ActionScript'
按Return
在文本字段外的页面上单击鼠标

结果：

10:35:18 - autocompleteselect
10:35:24 - autocompleteselect
10:35:26 - blur

如您所见，我执行了正常操作，但blur从未触发，因为我从未失去对测试字段的关注。

更新

评论后您可以看到：

https://jsfiddle.net/Twisty/b4nyguqd/2/

我的结果：

13:54:2 - Temp value updated: AppleScript
13:54:2 - autocompleteselect
13:54:6 - Temp Value during blur: AppleScript
13:54:6 - blur
13:54:14 - Temp value updated: Asp
13:54:14 - autocompleteselect
13:54:20 - Temp Value during blur: Asp
13:54:20 - blur

另一个测试缺少 select 并且 select 在没有模糊事件的情况下使用不同的值：

13:56:16 - Temp Value during blur: undefined
13:56:16 - blur
13:56:22 - Temp value updated: C++
13:56:22 - autocompleteselect
13:56:23 - Temp Value during blur: C++
13:56:23 - blur
13:56:28 - Temp value updated: C
13:56:28 - autocompleteselect
13:56:32 - Temp value updated: C++
13:56:32 - autocompleteselect
13:56:34 - Temp Value during blur: C++
13:56:34 - blur

jQuery 自动完成 select 输入字段关系上的事件和模糊事件

jQuery autocomplete select event and blur event on input field relation

jquery

jquery-ui

autocomplete

onblur