Customize JQuery Autocomplete

June 10, 2012

one comment

A few month ago I wrote a post about “Search Facebook Friends With Jquery Autocomplete”. The problem that after a while it become not relevant due to the changes in the jquery autocomplete API. Due to many requests that I got (in comments,emails, facebook, twitter) I decided to update it. So here we go…

Before I start I have to admit that I don’t like the new API it is too hacky to make a custom autocomplete and it is not documented!.

Before we implements “Search Facebook Friends With jQuery” we need to look at the jQuery autocomplete source code, https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L507. The method that render the UI for the autocomplete is called _renderItem

_renderItem: function( ul, item ) {
return $( “<li>” )
.append( $( “<a>” ).text( item.label ) )
.appendTo( ul );
}

Ho snap there is a problem it is private… But don’t worry it seems that there is a “normal” way to override it (again not documented)
in order to override autocomplete internal methods you need to write the code:


.data( “autocomplete” )._renderItem = function( ul, item ) {//write your code here }

So now that we know what to do we can make our own facebook autocomplete
*in my example the input textbox is <input id=”autocomplete-input” />

First we need to create an auto complete – you can find many examples of how to do it in the official jQuery Autocomplete site http://jqueryui.com/demos/autocomplete/

Now we need to render the facebook friends URL https://graph.facebook.com/me/friends?access_token={YOUR_ACCESS_TOKEN}&callback=?
You can read more about it here: http://graph.facebook.com/ (you will even get your access token there)

we almost done…  we need to override the _renderItem method


$("#autocomplete-input").data("autocomplete")._renderItem =  function( ul, item ) {
var image_url = "http://graph.facebook.com/" + item.value +"/picture";
return $( "<li>" ).append($("<img style='float:left'>").attr('src',image_url))
.append( $( "<a>" ).text( item.label ) )
.appendTo( ul );
}

we also need to make sure that we build the item that we get from facebook

success: function( data ) {
res = $.map( data.data, function( item ) {
if (item.name.toLowerCase().indexOf(request.term.toLowerCase()) >= 0){
return {
label: item.name,
value: item.id
}
}
});
response(res);
}

Here is a full example: (just add the jQuery , jQuery UI src file)

https://gist.github.com/2907134

*Note that you can optimize this sample by using “remote with cache” http://jqueryui.com/demos/autocomplete/#remote-with-cache or pre load the data

Good luck

Keep Writing, Compiling, and Debugging
Alon Nativ

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

one comment

  1. ShaharSeptember 10, 2012 ב 1:47 PM

    Thanks for that post.

    However jqueryui’s autocomplete is becoming kinda obsolete with Twitter’s bootstrap framework. They have the typeahead that works pretty well. I was wondering if you can explain how to achieve the same with bootstrap typeahead.

    Reply