Question

 $(document).ready(function () {
          $("#example").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 "<div class='test2'><img class='test' width='32px' height='32px' src='" + x + "'></img><span>" + data.name + "</span></div>";
               },

          }
             ).result(function (evnet, item) {
                 alert(item.id);       
            });
     });

     <input type="text" id="example"/>

I am using this code for facebook friends autosuggestion.It works,but its too slow because every time autocomplete function searching data from remote location.

Is there any other way to pass remote data by saving in a variable and passing it to .autocomplete() function.

Later i tried by saving the remote data to a variable , but i can’t pass the variable to autocomplete.

jQuery(document).ready(function () {

var aToken = document.getElementById('aToken').value;
jQuery.getJSON("https://graph.facebook.com/me/friends?access_token="+aToken, function(data) {
    var data = data;
});
    jQuery("#name_inp").autocomplete({
       width: 500,
       height: 200,
   max: 5000,
   source: data,
        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 "<div class='test2' onclick='return getId("+data.id+");'><span>" + data.name + "</span></div>";
       },

   }
     )
 });

Answer 1

1. You can retrieve the complete friends list and store it locally. Then instead of making remote call do search on local data.
2. Also set noCache: false it will cache request and will search in cache first
3. Try with good network connection. 🙂

EDIT:
Try this. Here I am storing results in userList variable which can be use as Autocomplete source.

$(function() {
        userList = null; 
        $.getJSON("https://graph.facebook.com/me/friends", {access_token:access_token,callback:"?"}, function(users) {
                 userList = users;
             });  
    });     

Or you can try this

$(function() {
        userList = null; 
        $.getJSON("https://graph.facebook.com/me/friends?access_token=" + accessToken + "&callback=?",function(users) {
                 userList = users;
             });  
    });     

I never used Facebook API so not sure about which parameters to pass.