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
- Use dataType: ‘jsonp’ – undocumented option that allow us to use jsonp instead of json
- Use Facebook API to get the user image: http://graph.facebook.com/{ID}/picture?type=square for example http://graph.facebook.com/4/picture?type=square
- Use the formatItem that will return HTML instead of a text.
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:
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
Thanks, very nice!
but I have a problem – it’s only shows me 10 friends and thats it.
Any idea for fixing it ?
Hi,
I guess that the ‘max’ property is set to 10.
Thanks,
Alon
Thanks..
I want to show all my friends,, Is it possible?
Hi Rijo,
You can change the “max” property
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!!!
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.
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
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
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 "
}
}
).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 "
[Break On This Error] ).result(function (evnet, item) {
pls help me!!
Thanks & regards
Vinay
Hi Vinay,
You need to add “https:// before the call to the autocomplete function
Thanks,
Alon
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 :/
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
hi blackvitae,
Did you change the access token?
Thanks,
A.
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
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 "
}
}
).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
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
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,
I can’t run plugin, Who has link demo for me? I added JS and change my token. Thank help me.
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,
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) ?
@tuibm
change:
https://graph.facebook.com/me/friends?access_token=” + accessToken + “&callback=?”
to:
https://graph.facebook.com/NUMERIC_FACEBOOK_ID/friends?access_token=ACCESS_TOKEN_STRING&callback=theGreatFunction
Hi All
There is an update to this post here: http://blogs.microsoft.co.il/blogs/alon_nativ/archive/2012/06/10/customize-jquery-autocomplete.aspx
Thanks,
Alon
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.