jsonp data in to tokenInput (or similar) plugin

Question

I am using they JqueryUI autocomplete plugin to return an autosuggest list of music artists as you begin typing their names in to a text field. I am using the Echo Nest API as the data source.

The code I am currently using is as follows:-

 jQuery.ajaxSetup({cache:true});
    $("#form-field-influence .text" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://developer.echonest.com/api/v4/artist/suggest",
                    dataType: "jsonp",
                    data: {
                        results: 12,
                        api_key: "my_API_key",
                        format:"jsonp",
                        name:request.term
                    },
                    success: function( data ) {
                        response( $.map( data.response.artists, function(item) {
                            return {
                                label: item.name,
                                value: item.name,
                                id: item.id
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            delay: 0,
            select: function( event, ui ) {
                $("#log").empty();
                $("#log").append(ui.item ? ui.item.id + ' ' + ui.item.label : '(nothing)');
            },
        });

Now, although this works perfectly and gives me an autocomplete list I need to turn this into a multiple select field allowing me to essentially 'tag' with as many artists as a user wishes.

I have found several plugins which offer this functionality. Most recently I have been playing with the 'tokenInput' plugin. owever this plugin expects the data to be returned in a specific format... Like this:-

[
    {"id":"856","name":"House"},
    {"id":"1035","name":"Desperate Housewives"},
    ...
]

I have been using this simple line to initialize the plugin:-

   $("#form-field-influence .text").tokenInput(

"http://developer.echonest.com/api/v4/artist/suggest?api_key=my_API_key"

);

However when I have set up tokenInput to read the JSONP data source the results are returned as follows:-

{"response": {"status": {"version": "4.2", "code": 0, "message": "Success"}, "artists": [{"name": "Hold A Candle To This (Alternate Version) (Re-mastered for 'Pirate Radio')", "id": "SOFXGAE12A58A787E3"}, {"name": "Radiohead", "id": "ARH6W4X1187B99274F"}, {"name": "Radio Moscow", "id": "AR3O0021187B999BC8"}, {"name": "The Radio Dept.", "id": "AREKO1L1187B997EFE"}, {"name": "TV on the Radio", "id": "AR0PK561187B9B9EF9"}, {"name": "Joshua Radin", "id": "ARPCRYQ1187FB4ECB8"}, {"name": "The One AM Radio", "id": "ARSHZ531187B99B36F"}, {"name": "Radaid", "id": "ARVGZWZ12086C11298"}, {"name": "New Radicals", "id": "ARL4UQB1187B9B74E3"}, {"name": "Go Radio", "id": "ARQCFYC12A10043E5B"}, {"name": "Radio Slave", "id": "ARKVKKG1187FB3B49A"}, {"name": "Red City Radio", "id": "ARYDXLV11EB9C82776"}, {"name": "Radio Radio", "id": "ARJUCSZ11F4C83E301"}, {"name": "Radikal Guru", "id": "ARCHBIP123526A0E1B"}, {"name": "Radium", "id": "AR8ZGW31187B99F0E5"}]}}

As you can see the data I want is nested within the 'artists' object. Therefore the plugin (and any of the other alternatives I have tried) do not read the data and display it in the drop down list.

Is there any way I can make this data source work with the tokenInput plugin? Alternatively are there any other 'autocomplete tagging' plugings out there that would be able to achieve this functionality?

Many thanks!

Answer 1

http://static.echonest.com/samples/suggest/ArtistSuggestAutoComplete.html :-)