如果快速输出选项卡,自动完成功能不会触发选择功能

时间:2016-08-23 19:42:43

标签: jquery jquery-ui jquery-ui-autocomplete

我在输入上配置了自动完成功能,延迟选项设置为0,autoFocus设置为true。源:自动完成设置为AJAX调用。通常,如果用户在字段外输入搜索字符串和选项卡,则会选择第一个项目。

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

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

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

问题:是否可以将自动完成配置为-always-如果用户输入搜索字符串并从输入中选择标签,则选择第一个返回的匹配,无论多快?

1 个答案:

答案 0 :(得分:0)

自动完成功能将被禁用"如果焦点是从相关输入中设置的,那么如果您从该输入移动焦点,则无法访问自动完成的值。

如果菜单被触发(并打开),此解决方案将仅



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>
&#13;
&#13;
&#13;

延迟设置为0,因此没有延迟,但是如果你的source是一个ajax调用 - 你会有延迟(如果用户将移动焦点移动到其他元素,结果将不是你想要的。)

我知道它并不完全符合您的要求,但如果您使用预定义值,它可以为您提供解决方案。