Create an autocompleting artist suggest interface

At The Echo Nest, we just rolled out the beta version of a new API method:  artist/suggest – that lets you build autocomplete interfaces for artists.   I wrote a little artist suggestion demo to show how to use the artist/suggest to build an autocomplete interface with jQuery.

The artist/suggest API tries to do the right thing when suggesting artist names.  It presents matching artists in order of artist familiarity:

It deals with stop words (like the, and, and a) properly.  You don’t need to type ‘the bea’ if you are looking for The Beatles but you can if you want to.

It deals with international characters in the expected way, so that we poor Americans that don’t know how to type umlauts can still listen to Björk:

The artist/suggest API is backed by millions of artists, including many, many artists that you’ve never heard of:

Integrating with jQuery is straightforward using the jQuery UI Autocomplete widget.  The core code is:

$(function() {
    $("#artist" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://developer.echonest.com/api/v4/artist/suggest",
                dataType: "jsonp",
                data: {
                    results: 12,
                    api_key: "YOUR_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: 3,
        select: function( event, ui ) {
            $("#log").empty();
            $("#log").append(ui.item ? ui.item.id + ' ' + ui.item.label : '(nothing)');
        },
    });
});

The full code is here: http://static.echonest.com/samples/suggest/ArtistSuggestAutoComplete.html

A source function is defined that makes the jsonp call to the artist/suggest interface, and the response handler gets the extracts the matching artist names  and ids from the result and puts them in a dictionary for use by the widget.  Since the artist/suggest API also returns Echo Nest Artist IDs it is straightforward to turn make further Echo Nest calls to get detailed data for the artists.  (Note that the artist/suggest API doesn’t allow you to specify buckets to add more data to the response like many of our other artist calls. This is so that we can keep the response time of the suggest API as low as possible for interactive applications).

We hope people will find the artist/suggest API.  We are releasing it as a beta API  – we may change how it works as we get a better understanding of how people want to use it.  Feel free to send us any suggestions you may have.

,

  1. #1 by Colin on March 17, 2011 - 12:11 pm

    This will be incredibly useful!

  2. #2 by zazi on March 17, 2011 - 1:29 pm

    +1

  3. #3 by Asma on March 17, 2011 - 4:40 pm

    very helpful!

  4. #4 by Oscar Järkvik on April 4, 2011 - 12:23 pm

    Initially the above example code didn’t work with jQuery 1.5.2, only when using the older 1.4.2. I found that by turning off the cache prevention it worked with the most recent version of jQuery. The cache prevention is unprevented by doing jQuery.ajaxSetup({cache:true});.

    Brilliant function by the way! Keep up the great work.

    Oscar

    • #5 by Paul on April 4, 2011 - 12:52 pm

      Oscar, Thanks for debugging!