jQuery UI autocomplete drop down not displaying

javascript, jquery, jquery-ui, jquery-ui-autocomplete, spotify

Solution

The autocomplete widget expects data to be formatted in a very specific way so that it can be parsed. The array you supply or pass to the `response` callback must be:

- An array with strings, or

- An array with objects that have a label property, a value property, or both.

(See autocomplete's documentation under "Overview" / "Expected data format" for more information)

The typical way to do this when you have a data source that you can't change is use `$.map` to transform the results into a format that autocomplete expects:

$("#spotify_song_search").autocomplete({
    source: function(request, response) {
        $.get("http://ws.spotify.com/search/1/track.json", {
            q: request.term
        }, function(data) {
            response($.map(data.tracks, function (el) {
                return el.name;
            }));
        });
    }
});

Example: http://jsfiddle.net/ANmUs/ (Note: this does not appear to be working in Firefox right now; it may be due to the size of the response. It works fine in Chrome though)

Problem

I am trying to use the jQuery UI autocomplete feature to search spotify's music library. While everything passes well, and I do get a successful response: There is no drop down suggestions. For instance I was searching "time" and I wanted to see: - Time by Hans Zimmer <--(This is what I was searching for) - Back in time by Pitbull - Elevate by Big Time Rush etc. Here is my JavaScript code: ``` <script>$(function() {$( "#spotify_song_search" ).autocomplete({source: function(request, response) { $.get("http://ws.spotify.com/search/1/track.json", { q: request.term },function( data ) { alert(data); response(data);}); },success: function(data) { // pass your data to the response callback alert(data); response(data); }});});</script> ``` I must be doing something wrong. I also checked the jQuery docs here: http://jqueryui.com/demos/autocomplete/ but it doesn't give any explanation why this would occur. And I added alerts to see if I would at least get a response, which I do, but it just returns `[object Object]`. What do I need to do to display search results? Error: `Uncaught SyntaxError: Unexpected token ILLEGAL` on Line 417:

Original source