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" />