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, 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

Now we need to render the facebook friends URL{YOUR_ACCESS_TOKEN}&callback=?
You can read more about it here: (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 = "" + 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(, function( item ) {
if ( >= 0){
return {

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

*Note that you can optimize this sample by using “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.