jQuery UI autocomplete strange behavior

Question

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.

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?

Answer 1

Try this according to this answer on SO

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

Answer 2

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.