2011-07-05 8 views
2

オートコンプリートフィールドにfacebook graph api/me/friendsリストが必要です。私は私の友人を選んで、そのうちの1つを選んでそのIDを持っていたい。Facebook Graph APIの友だちからのカスタムデータでjQuery UIのオートコンプリート

名前とIDを持つ "data" jsonオブジェクトのFacebookレスポンス。完璧! いくつかのコード:

$(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%である私は、入力を開始するとき、私の友人のリストが表示されますが、それは最初から最後まで順番だし、それを濾過していません。 例: マイリスト完全である: マルコ マッシモ マリノ ミンモ シモーネ サラ ソニア

私は「S」で始まる場合にのみ シモーネ サラ ソニア

が、結果をもたらすべきですリストは変更されません。

どうしますか? ありがとうございました。

答えて

2

ソースプロパティは、プラグインは、データソースを必要とし、これまでに呼び出される関数を指していると、問題がある:それは返すので、友人を検索するときにFBグラフAPIは、「用語」のparamを受け入れませんあなたの入力に基づいて常に同じデータ。何が必要、このようなものです:

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)); 
}); 

それはフィルタが配列で行動できるように、すべての友人を取得し、解析された項目の配列と変数を設定します、唯一つの要求を行います。

私はそれがあなたを助けてくれることを願っています。

関連する問題