javascript - jQuery UI autocomplete strange behavior - Stack Overflow

admin管理员组

文章数量:1295103

Following is my code:

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").autoplete({
        source: availableTags
});

From Docs, the default behavior is a kind of dropdown the matched items. But for me it is showing like

Screenshot:

10 results are available, use up and down arrow keys to navigate.

Sorry, I couldn't reproduce this behavior in jsfiddle. The navigation is done using up and down arrow keys. I don't want this, how can I revert back to default dropdown? Please share your suggestions.

Updates:

With @Anton reference, I was able to remove the validation message, however the dropdown is not showing. But I am able to navigate using up/down arrow keys. Any feedback on this?

Following is my code:

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").autoplete({
        source: availableTags
});

From Docs, the default behavior is a kind of dropdown the matched items. But for me it is showing like

Screenshot:

10 results are available, use up and down arrow keys to navigate.

Sorry, I couldn't reproduce this behavior in jsfiddle. The navigation is done using up and down arrow keys. I don't want this, how can I revert back to default dropdown? Please share your suggestions.

Updates:

With @Anton reference, I was able to remove the validation message, however the dropdown is not showing. But I am able to navigate using up/down arrow keys. Any feedback on this?

• javascript
• jquery
• jquery-ui
• autoplete

Share Follow edited Sep 11, 2013 at 7:29 Praveen asked Sep 11, 2013 at 7:10 PraveenPraveen 56.5k3535 gold badges136136 silver badges165165 bronze badges 2

• 1 Found something here that might fix the problem stackoverflow./questions/13011127/… – Anton Commented Sep 11, 2013 at 7:15
• try to include it in a function like $(function() {} – Able Commented Sep 11, 2013 at 7:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Try this according to this answer on SO

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

You have to add jquery-ui.css in your project folder and link it.

Edit the ui-autoplete in the above .css and add z-index = 4000 into that. Your dropdown should work fine.

Anton is right.

Also please note I think it's not a best practice to use some id starting in capital :)

$("#city")

Use this example on fiddle.

I got same problem and solve it with that annoying tooltip by including default css style file for jquery.ui.

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

Just forgot to do this after including jquery-ui javascript source file jquery-ui.min.js.

本文标签： javascriptjQuery UI autocomplete strange behaviorStack Overflow