jQuery autocomplete + JSONP + Wikipedia OpenSearch service

My second Desert Island-related post...

A bit of background...

When a user creates his / her list in the app, he / she has to somehow specific a list of albums.

There were a number of issues which I had to consider when designing this part of the app:

1) where do I get artist name /album names from?
2) do users browse and select or do they simply type into a freetext field with auto-completion / suggestion?
3) when users have to specify new artist names / album names unknown to my app, how do I ensure that they type in the "universally-accepted" names for the artists / albums?

It is not realistic for me to keep a database of all known artists and albums - it would be a maintenance nightmare. New albums come out everyday!

So I came up with the following idea: (why not add your list and see it work in practice!)

When adding an album to the list, the user would

1) specify the artist using a freetext field with auto-completion (using data provided by the Wikipedia OpenSearch service)
2) click on "list albums" to see a list of popular albums by this artist (using Last.fm's artist.gettopalbums service)
3) either select an album from the list or, if the album is not in the list, create a new album, again using another freetext field with auto-completion (again using the Wikipedia OpenSearch service)

This way, I don't really differentiate between new or old artists / albums (i.e. whether a certain entry has been chosen by somehow else before) when dealing with the list creation UI.

In this blog I would like to focus on the use of jQuery autocomplete plugin along with the (not very well-known but IMHO very useful) Wikipedia OpenSearch service.

jQuery autocomplete plugin with Wikipedia Opensearch

Links to jQuery autocomplete plugin and documentation

Unfortunately, the documentation above fails to mention how to use a third-party cross-domain JSONP service (the Wikipedia service in my case) to provide data for the autocomplete plugin. After a bit of googling, I came across this excellent article which shows the autocomplete plugin does really with JSONP! Do go ahead an read this article.

The following is my implementation using the Wikipedia Opensearch JSONP service, where expression is the CSS selector of the html textbox to which the autocomplete widget is to be attached:

function attachWikiAutoComplete(expression) {
 $(expression).autocomplete("http://en.wikipedia.org/w/api.php",  {
    dataType: "jsonp", 
    parse: function(data) { 
      var rows = new Array(); 
      var matches = data[1];
      for( var i = 0; i < matches.length; i++){ 
        rows[i] = { data:matches[i], value:matches[i], result:matches[i] }; 
      } 
      return rows;
    },
    formatItem: function(row) { return row; }, 
    extraParams: {
      action: "opensearch", 
      format: "json", 
      search: function () { return $(expression).val() } }, 
     max: 10 
   }
 );
}

For those of you interested, an example HTTP request sent by the autocomplete plugin to Wikipedia could be (user's just typed in "metallic"):
http://en.wikipedia.org/w/api.php?callback=jsonp1263175070864&_=1263175085048&q=metallic&limit=10&timestamp=1263175085048&action=opensearch&format=json&search=metallic

As you can see, the autocomplete plugin automatically adds the parameters "q" and "limit" to the url, which Wikipedia simply ignores. If you are to create your own REST data service for the plugin, you may want to create your service to understand "q" as the query parameter and "limit" for result limit parameter. However, if you are using a third-party service, just add the required query pararmeter ("search" in the case of the Wikipedia Opensearch service) as part of the "extraParams" option, as I have done here.

To see this Wiki jQuery autocomplete in action, log into http://desert-island.appspot.com via Facebook Connect, click on "Create" in the welcome box and try adding albums to the empty list!