j查询输入字段关系上的自动完成选择事件和模糊事件

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');
});

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

选择

模糊

当我从自动完成中选择项目时，我是否可以确定这两个侦听器始终按此顺序执行（先选择，后模糊）？我如何确定执行顺序将始终是这样的？

感谢您的关注。

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>rn");
}
$(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);
  });
});

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

1. 键入"app"，结果显示："AppleScript"
2. 向下箭头，直到突出显示"AppleScript"
3. 按回车键
4. 删除，直到只剩下"A"
5. 向下箭头到"动作脚本"
6. 按回车键
7. 在文本字段外的页面上单击鼠标

结果：

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

另一个缺少选择的测试，并且还选择不同的值而没有模糊事件：

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