jQuery UI自动完成来自Facebook Graph API好友的自定义数据

Question

我想在自动完成字段中列出我的facebook图形api/me/friends列表。我要选择我的朋友，选择其中一个结束有它的ID。

Facebook用带有名称和id的"数据"json对象进行响应。完美！部分代码：

$(document).ready(function(){
    FB.api('/me/friends', function(fbresponse){
        $("#input_13").autocomplete({
                source : function(request, response){
                    response($.map(fbresponse.data, function(e){
                        return{
                            id : e.id, 
                            name : e.name
                        }
                    }))
                },
                select : function(event, ui){
                            alert(ui.item.name);
                            $("#input_13").val(ui.item.name);
                            $("#input_10").val(ui.item.id);
                            return false;
                }
            }).data("autocomplete")._renderItem = function(ul, item){
                    return $("<li></li>")
                            .data("item.autocomplete", item)
                            .append( $("<a></a>").html(item.name) )
                            .appendTo(ul); 
                        };
    });

});

结果是90%，当我开始打字时，我的朋友列表会出现，但它是从第一个到最后的顺序，没有经过过滤。示例：我的完整列表是：马尔科massimo马里诺mimmo西蒙萨拉sonia

当我以"s"开头时，结果应该只有西蒙萨拉sonia

但是结果列表没有改变。

发生了什么？非常感谢。

Answer 1

由于源属性指向一个在插件需要数据源时调用的函数，问题是：FB Graph API在搜索好友时不接受"term"参数，因此它总是根据您的输入返回相同的数据。你需要的是这样的东西：

var makeItems = function(fbresponse) {
  return $.map(fbresponse, function(item) {
    return {
      label: item.name,
      value: item.id,
    }
  });
};
var setAutoComplete = function(parsed_items) {
  $("#input_13").autocomplete({
    source : parsed_items,
    select : function(event, ui){
      alert(ui.item.name);
      $("#input_13").val(ui.item.name);
      $("#input_10").val(ui.item.id);
      return false;
    }
  }).data("autocomplete")._renderItem = function(ul, item) {
    return $("<li></li>")
      .data("item.autocomplete", item)
      .append( $("<a></a>").html(item.name) )
      .appendTo(ul); 
  };
};
FB.api('/me/friends', function(fbresponse) {
  setAutoComplete(makeItems(fbresponse.data));
});

它将只发出一个请求，获取所有好友，并设置一个带有解析项数组的变量，以便过滤器可以在数组中执行操作。

我希望它能帮助你。

Answer 2

看看这个代码示例，它运行良好
http://blogs.microsoft.co.il/blogs/alon_nativ/archive/2011/05/30/search-facebook-friends-with-jquery-autocomplete.aspx