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 stackoverflow.com/questions/13011127/… — Anton
– Anton, Commented Sep 11, 2013 at 7:15

Community · Accepted Answer · 2017-05-23 10:30:17Z

5

Try this according to this answer on SO

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

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Sep 11, 2013 at 7:20

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Praveen Over a year ago

+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?

Anton Over a year ago

@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; }

curlyreggie · Accepted Answer · 2014-02-13 08:39:45Z

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, 2014 at 8:39

curlyreggie

1,5305 gold badges22 silver badges31 bronze badges

Comments

franchez · Accepted Answer · 2013-09-11 07:24:46Z

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, 2013 at 7:24

franchez

5671 gold badge7 silver badges20 bronze badges

Comments

valex · Accepted Answer · 2016-07-01 12:20:55Z

0

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.

answered Jul 1, 2016 at 12:20

valex

5,9072 gold badges40 silver badges41 bronze badges

Collectives™ on Stack Overflow

jQuery UI autocomplete strange behavior

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related