如果标签快速退出输入，自动完成不会触发选择功能

Question

我已经为输入配置了自动完成功能，延迟选项设置为 0，自动对焦设置为 true。来源：自动完成设置为 AJAX 调用。通常情况下，如果用户输入搜索字符串并在字段外使用制表符，则会选择第一项。

但是，如果有经验的用户输入的搜索字符串应该只有一个匹配项并且非常快 选项卡在输入之外，则 select 选项指定的函数不会触发，并且输入只包含用户输入的搜索字符串。这会在提交表单时导致错误，因为尚未进行有效选择（通常，选择匹配项会将隐藏的表单字段设置为所选匹配项的值）。

如果我在 source 选项指定的函数中放置一个断点来检索匹配项，我可以看到它被调用，并返回一个匹配项列表。但是，我在 select 选项指定的函数中放置的断点在我快速跳出时永远不会命中。

当针对 localhost 或远程网络服务器运行时，我可以在 Chrome 和 IE 11 中重现此行为。 jquery-ui版本为v1.11.4。

问题：是否可以将自动完成配置为 - 始终 - 如果用户输入搜索字符串并从输入中跳出标签，则无论多快都选择第一个返回的匹配项？

Answer 1

如果焦点不在相关输入中，自动完成将被“禁用”，因此如果您从该输入移开焦点，您将无法访问自动完成的值。

此解决方案仅在菜单被触发（并打开）时才起作用：

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$( "#tags" ).autocomplete({
  source: availableTags,
  autoFocus: true,
  delay: 0,
  focus: function(event, ui) {
    $(this).val(ui.item.value)
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

那里的延迟设置为 0，因此不会有延迟，但是如果您的 source 是一个 ajax 调用 - 您将有延迟（如果用户将焦点移动到其他元素，结果将不是你要找的东西）。

我知道这不是您正在寻找的，但是如果您使用预定义的值，它可以为您提供解决方案。