JQuery user interface autocomplete strange behavior

Question

Below 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 Documents , the default behavior is a kind of dropdown consistent elements. But for me it looks like

Screenshot:

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

Sorry, I could not reproduce this behavior in jsfiddle. Navigation is done using the up and down arrow keys. I do not want this, how can I return to the default default? Please share your suggestions.

Updates:

With the @Anton link, I was able to delete the verification message, however dropdown does not show . But I can navigate using the up / down arrow keys. Any feedback on this?

Answer 1

Try this according to this answer on SO

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

Answer 2

You need to add jquery-ui.css to the project folder and link it.

Change ui-autocomplete in the above .css and add z-index = 4000 to this. Your dropdown should work fine.

Answer 3

Anton is right.

Also note that I am not recommended to use some kind of identifier starting with capital :)

 $("#city") 

Use this example on a script.

Answer 4

I have the same problem and solve it with this annoying hint by including the 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 .