jQuery UI 自动完成奇怪的行为答案

【问题标题】：jQuery UI autocomplete strange behaviorjQuery UI 自动完成奇怪的行为
【发布时间】：2013-09-15 02:26:45
【问题描述】：

以下是我的代码：

var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
"Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell",
"Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];

$("#City").autocomplete({
        source: availableTags
});

从Docs开始，默认行为是一种dropdown匹配项。但对我来说，它显示像

截图：

有 10 个结果可用，使用向上和向下箭头键导航。

抱歉，我无法在 jsfiddle 中重现此行为。导航是使用向上和向下箭头键完成的。我不想要这个，我怎样才能恢复到默认下拉菜单？请分享您的建议。

更新：

使用@Anton 引用，我能够删除验证消息，但是dropdown 没有显示。但我可以使用向上/向下箭头键进行导航。对此有何反馈？

【问题讨论】：

在这里找到了可以解决问题的东西stackoverflow.com/questions/13011127/…
尝试将它包含在像 $(function() {}这样的函数中

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

我遇到了同样的问题，并通过包含 jquery.ui 的默认 css 样式文件来解决这个烦人的工具提示。

<link rel="stylesheet" href="jquery-ui/themes/base/jquery-ui.min.css" />

只是在包含 jquery-ui javascript 源文件 jquery-ui.min.js 后忘记了这样做。

【讨论】：

【解决方案2】：

你必须在你的项目文件夹中添加jquery-ui.css并链接它。

编辑上述 .css 中的 ui-autocomplete 并将 z-index = 4000 添加到其中。您的下拉菜单应该可以正常工作。

【讨论】：

【解决方案3】：

安东是对的。

另外请注意，我认为使用一些以大写开头的 id 不是最佳做法 :)

$("#city")

在小提琴上使用这个example。

【讨论】：

【解决方案4】：

根据这个answer在SO上试试这个

$("#City").autocomplete({
    source: availableTags,
    messages: {
        noResults: '',
        results: function() {}
    }
});

【讨论】：

+1 感谢这有助于删除验证消息，但下拉菜单仍然不只显示使用向上/向下键的导航。对此有什么想法吗？
@user1671639 我不确定，但我一直在环顾四周，可能是 z-index 问题，试试这个ul.ui-autocomplete.ui-menu { z-index: 1000; }