I am trying to use the jQuery UI autoplete 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" ).autoplete({source: function(request, response) {
        $.get(".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: / 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:

I am trying to use the jQuery UI autoplete 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" ).autoplete({source: function(request, response) {
        $.get("http://ws.spotify./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./demos/autoplete/ 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:

• javascript
• jquery
• jquery-ui
• jquery-ui-autoplete
• spotify

• No errors in the Console tab? – Fabrício Matté Commented Jun 5, 2012 at 0:29
• Oh never mind, the status is OK on your network tab. I'll look into the code. – Fabrício Matté Commented Jun 5, 2012 at 0:36
• Maybe you can show us a little more of code, mainly your response() function you call 3 times, and the markup to be able to reproduce it. – Fabrício Matté Commented Jun 5, 2012 at 0:40
• Make sure it the code is actually valid first. – Incognito Commented Jun 5, 2012 at 1:26
• 1 You need to format the response data, which I assume is being done in the response() method. jQueryUI expects a certain format from the success() function and if it doesn't match the results will not display. I suspect the conversion from Spotify format to the expected format is not correct. Take a look at the documentation, in particular the Remote Datasource and Remote JSONP datasource and look at the Network tab in the Console to see the response data format. – andyb Commented Jun 5, 2012 at 8:48

1 Answer 1

The autoplete 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:

1. An array with strings, or
2. An array with objects that have a label property, a value property, or both.

(See autoplete'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 autoplete expects:

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

Example: http://jsfiddle/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)