CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocomplete
Lachlan Edwards
Lachlan Edwards

Reputation: 109

jQuery UI wont display autocomplete menu

I'm having a small problem. I have this code here:

var suggestCallBack; // global var for autocomplete jsonp

$(document).ready(function () {
    $("#youtube-search").autocomplete({
        messages: {
            noResults: '',
            results: function() {}
        },
        source: function(request, response) {
            $.getJSON("https://suggestqueries.google.com/complete/search?callback=?",
                {
                  "hl":"en", // Language
                  "ds":"yt", // Restrict lookup to youtube
                  "jsonp":"suggestCallBack", // jsonp callback function name
                  "q":request.term, // query term
                  "client":"youtube" // force youtube style response, i.e. jsonp
                }
            );
            suggestCallBack = function (data) {
                var suggestions = [];
                $.each(data[1], function(key, val) {
                    suggestions.push({"value":val[0]});
                });
                suggestions.length = 5; // prune suggestions list to only 5 items
                response(suggestions);
            };
        },
    });
});

If you push the up and down arrow keys it will autofill the autocomplete suggestions, however it will not display the menu below the input field #youtube-search. Any idea what's going wrong?

Thanks in advance. :)

Upvotes: 0

Views: 68

Answers (1)

Philip Stuyck
Philip Stuyck

Reputation: 7467

Please verify that the CSS that you need for the autocomplete is in place. Otherwise the popup will not show. I made the same mistake as you did the first time I used autocomplete as my first jquery UI control.

Upvotes: 1

Related Questions