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.

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?

Found something here that might fix the problem http://stackoverflow.com/questions/13011127/how-to-remove-change-jquery-ui-autocomplete-helper-text — Anton, Sep 11 '13 at 07:15

score 5 · Accepted Answer · edited May 23 '17 at 10:30

5

Try this according to this answer on SO

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

edited May 23 '17 at 10:30

Community

1
1

answered Sep 11 '13 at 07:20

Anton

32,245
5
44
54

+1 Thanks this helps to remove the validation message, however still the dropdown is not showing only navigation using up/down key. Any thoughts on this? – Praveen Sep 11 '13 at 07:27
1

@user1671639 I'm not sure, but i've been looking around and it might be z-index problems, try this `ul.ui-autocomplete.ui-menu { z-index: 1000; }` – Anton Sep 11 '13 at 07:42

score 2 · Answer 2 · answered Feb 13 '14 at 08:39

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.

answered Feb 13 '14 at 08:39

curlyreggie

1,530
4
21
31

score 0 · Answer 3 · answered Sep 11 '13 at 07:24

0

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.

answered Sep 11 '13 at 07:24

franchez

567
1
7
20

score 0 · Answer 4 · answered Jul 01 '16 at 12:20

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.

jQuery UI autocomplete strange behavior

4 Answers4

Linked