jQuery UI autocomplete strange behavior

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").autocomplete({
        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.

enter image description here

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?

Answers:

Answer

Try this according to this answer on SO

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

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

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

Answer

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.

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.