Search Facebook Friends With Jquery Autocomplete

May 30, 2011

23 comments

Just made a small autocomplete textbox that search a user friends from Facebook.

it is a pretty simple implementation that allow the user to search for his friends. In order to use it you will need to get a valid access_token from Facebook (but you can read more in how to use the Facebook graph API at http://developers.facebook.com/docs/reference/api/ – or get a sample one).

There are a few tricks in the implantation

 

So here is the code

   1: <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

   2: <script src="../../Scripts/jquery-ui.min.js" type="text/javascript"></script>

   3: <script type="text/javascript" src="../../Scripts/jquery.autocomplete.min.js"></script> 

   4: <script>

   5:  

   6:     //Get the user image from the user id

   7:     function getImage(id) {

   8:         return "http://graph.facebook.com/" + id + "/picture?type=square";

   9:     }

  10:  

  11:     var accessToken = "PUT A VALID ACCESS TOKEN HERE INORDER TO MAKE IT WORK";

  12:     $(document).ready(function () {

  13:         $("#example").autocomplete("https://graph.facebook.com/me/friends?access_token=" + accessToken + "&callback=?", {

  14:         

  15:             width: 250,

  16:             height: 400,

  17:             max: 8,

  18:             dataType: 'jsonp',

  19:             cacheLength: 10,

  20:             minChars: 1,

  21:             parse: function (data) {

  22:                 var rows = new Array();

  23:                 data = data.data;

  24:                 for (var i = 0; i < data.length; i++) {

  25:                     rows[i] = { data: data[i], value: data[i].name, result: data[i].name };

  26:                 }

  27:                 return rows;

  28:             },

  29:             formatItem: function (data, i, n, value, text, a, b, c, d) {

  30:                 var x = getImage(data.id);

  31:                 return "<div class='test2'><img class='test' width='32px' height='32px' src='" + x + "'></img><span>" + data.name + "</span></div>";

  32:             },

  33:             

  34:         }

  35:           ).result(function (evnet, item) {

  36:               alert(item.id);       

  37:           });

  38:     });

  39: </script>

  40: Write a friend name

  41: <input id="example" />

The final result will look something like that:

image

All you need to do now is change the style so it will fit in your site

You can read more about jquery autocomplete plugin here: http://docs.jquery.com/Plugins/Autocomplete/autocomplete 

 

Update: There is an update to this post here

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>

23 comments

  1. talJune 2, 2011 ב 3:47 PM

    Thanks, very nice!

    but I have a problem – it’s only shows me 10 friends and thats it.

    Any idea for fixing it ?

    Reply
  2. Alon NativJune 3, 2011 ב 2:48 AM

    Hi,
    I guess that the ‘max’ property is set to 10.

    Thanks,
    Alon

    Reply
  3. RijoJuly 12, 2011 ב 5:36 PM

    Thanks..

    I want to show all my friends,, Is it possible?

    Reply
  4. Alon NativJuly 12, 2011 ב 5:51 PM

    Hi Rijo,
    You can change the “max” property

    Reply
  5. PhilipJuly 17, 2011 ב 9:23 PM

    thanks a lot for this information,
    can you explain us how we can pass the id value in a var and then call it in the “to” parameter of publish.stream?

    thanks a lot again!!!

    Reply
  6. Alon NativJuly 22, 2011 ב 9:43 PM

    Hi Philp,
    I wouldn’t recommend to use the “publish.stream” API because (according to Facebook) it is going to be deprecated soon.
    Anyway if you want to use it just change the alert to the method call that you want to make and pass the item.id (line 36 – alert(item.id);)

    Thanks,
    A.

    Reply
  7. MohammedSeptember 26, 2011 ב 4:21 PM

    Dear Friends I need to implement Auto Complete with Image prefix. If any One have any Customised code for this please help me

    I will be Thank full to you.

    Mohammed

    Reply
  8. VinayOctober 31, 2011 ב 8:15 AM

    I want to use this code but it shows error in line no 36 that result is not a function so what should i do pls help me

    Reply
  9. VinayOctober 31, 2011 ב 8:38 AM

    I have used the following code / function for fetching data:

    function recipient() {
    var accessToken = “AAADdFkPzypoBABYke9IZADAXSdtmig9m7gQMXFSiDjFHZBnAHTVnoZAT366VNTIyCpPFfoigrfna1Ml0KS89zxSQYY6QTwZD”;
    jQuery(“#recipent”).autocomplete(“https://graph.facebook.com/me/friends?access_token=” + accessToken + “&callback=?”, {
    width: 250,
    height: 400,
    max: 8,
    dataType: ‘jsonp’,
    cacheLength: 10,
    minChars: 1,
    parse: function (data) {
    var rows = new Array();
    data = data.data;
    for (var i = 0; i < data.length; i++) {
    rows[i] = { data: data[i], value: data[i].name, result: data[i].name };
    }
    return rows;
    },
    formatItem: function (data, i, n, value, text, a, b, c, d) {
    var x = getImage(data.id);
    return "

    ” + data.name + ““;
    }
    }
    ).result(function (evnet, item) {
    alert(item.id);
    });
    }

    It gives error that is:
    jQuery(“#recipent”).autocomplete(“https://graph.facebook.com/me/friends?access_token=” + accessToken + “&callback=?”, {width: 250, height: 400, max: 8, dataType: “jsonp”, cacheLength: 10, minChars: 1, parse: function (data) {var rows = new Array;data = data.data;for (var i = 0; i < data.length; i++) {rows[i] = {data: data[i], value: data[i].name, result: data[i].name};}return rows;}, formatItem: function (data, i, n, value, text, a, b, c, d) {var x = getImage(data.id);return "

    ” + data.name + ““;}}).result is not a function
    [Break On This Error] ).result(function (evnet, item) {

    pls help me!!
    Thanks & regards
    Vinay

    Reply
  10. Alon NativDecember 24, 2011 ב 1:06 AM

    Hi Vinay,
    You need to add “https:// before the call to the autocomplete function

    Thanks,
    Alon

    Reply
  11. blackvitaeDecember 27, 2011 ב 11:44 PM

    I have this error on my firebug :
    data is undefined

    On the line of formatItem: function(

    I don’t know why i’m not expert in JS :/

    Reply
  12. ercanJanuary 16, 2012 ב 11:53 PM

    i want to set the data in a variable then autocomplete it within the variable but i couldnt do it. would you help it? for example i want to use getJSON(url) and set its result to a variable so it doesnt need to go to the server everytime and maybe it is quicker

    Reply
  13. Alon NativJanuary 17, 2012 ב 12:41 AM

    hi blackvitae,
    Did you change the access token?

    Thanks,
    A.

    Reply
  14. Alon NativJanuary 17, 2012 ב 12:44 AM

    hi ercan,
    Good question.
    step one you can load the data from facebook into json using a simple ajax and then set the data into variable.
    step two then you can use the jquery autocomplete – http://docs.jquery.com/Plugins/Autocomplete
    like in the example:
    var data = “Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities”.split(” “);
    $(“#example”).autocomplete(data);

    I hope that I helped you

    Thanks,
    Alon

    Reply
  15. ercanJanuary 17, 2012 ב 1:11 AM

    thanks for the answer alon

    i tried with the following code but it fails:
    $(document).ready(function () {

    var fbData = null;
    $.getJSON(“https://graph.facebook.com/me/friends?access_token=” + accessToken + “&callback=?”, function (myData) {
    fbData = myData;

    $(“#< %=txtSearch.ClientID%>“).autocomplete(fbData, {

    max: 500,
    dataType: ‘jsonp’,
    cacheLength: 10,
    minChars: 1,

    parse: function (data) {

    var rows = new Array();
    data = data.data;
    for (var i = 0; i < data.length; i++) {
    rows[i] = { data: data[i], value: data[i].name, result: data[i].name };
    }
    return rows;
    },
    formatItem: function (data, i, n, value, text, a, b, c, d) {

    var x = getImage(data.id);
    return "

    ” + data.name + ““;
    }

    }
    ).result(function (evnet, item) {
    $(“#< %=hdnFriend.ClientID%>“).val(item.id);
    });

    });

    });

    if i ommit getJSON and write the url in autocomplete function as it is in your example in this page, it works but with getJSON it fails

    could you tell me what is my mistake?

    thanks

    Reply
  16. Alon NativJanuary 17, 2012 ב 2:00 AM

    ercan,
    The problem is that you are calling getJSON but asking from facebook for jsonp.
    when you add the “callback=?” to the url you are asking from facebook for jsonp and not json.
    there are two options
    1. remove the “callback=?” – it won’t work on old browser that doesn’t support cross domain json
    2. ask from jquery to use jsonp, for example:
    $.ajax({
    url: ‘PUT YOUR URL HERE’,
    dataType: ‘jsonp’, //jsonp not json!
    success: function(d){console.log(d)} //here is the callback function
    });

    good luck

    Thanks,
    Alon

    Reply
  17. ercanJanuary 17, 2012 ב 8:31 AM

    if i use ajax before autocomplete function my variable is null outside of ajax. And if i put autocomplete inside of ajax it fails again for example:

    $.ajax({

    url: ‘https://graph.facebook.com/me/friends?access_token=’ + accessToken + ‘&callback=?’,

    dataType: ‘jsonp’,
    success: function (d) { fbData = d }
    });
    alert(fbData); –> NULL
    $(“#< %=txtSearch.ClientID%>“).autocomplete(fbData,{

    max: 500,
    dataType: ‘jsonp’,
    cacheLength: 10,
    minChars: 1,

    Reply
  18. chinhdungFebruary 1, 2012 ב 10:31 AM

    I can’t run plugin, Who has link demo for me? I added JS and change my token. Thank help me.

    Reply
  19. tuibmFebruary 8, 2012 ב 9:30 PM

    hello, im trying to use this script, but i get this error in my chrome console:

    Uncaught TypeError: Object [object Object] has no method ‘result’ in this line:

    ).result(function (evnet, item) {

    yes, i already change the token,

    Reply
  20. bmtiuFebruary 8, 2012 ב 10:38 PM

    I see that autocomplete plugin is deprecated and not developed anymore, its successor is part of jQuery UI, is there anyway to update this script to work with the new jQuery UI (1.8.16) ?

    Reply
  21. isabel marantSeptember 15, 2013 ב 4:28 PM

    There are also so many video uploading websites, and these as well give facility for distribution their videos, however I think YouTube is the finest.

    Reply