Автозаполнение пользовательского интерфейса jQuery с пользовательскими данными от друзей Facebook Graph API

Я хочу, чтобы мой список api/me/friends в facebook отображался в поле автозаполнения. Я хочу выбрать своего друга, выбрать одного из них и получить его идентификатор.

Ответ Facebook с объектом 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%, когда я начинаю печатать, появляется список моих друзей, но в порядке от первого до конца, он не фильтруется. Пример: Мой полный список: марко массимо марино миммо симоне сара соня

когда я начинаю с "s", должно получиться только simone sara sonia

но список результатов не меняется.

Что случилось? Большое спасибо.


javascript facebook-graph-api
person Jacopo    schedule 05.07.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Поскольку ваше исходное свойство указывает на функцию, она вызывается всякий раз, когда плагину нужен источник данных, проблема в том, что API-интерфейс FB Graph не принимает параметр «термин» при поиске друзей, поэтому он всегда возвращает одни и те же данные на основе вашего Вход. Вам нужно что-то вроде этого:

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

Он сделает только один запрос, получит всех друзей и установит переменную с массивом проанализированных элементов, чтобы фильтр мог действовать в массиве.

Я надеюсь, что это поможет вам.

person jeffersongirao    schedule 17.01.2012

arrow_upward
1
arrow_downward

взгляните на этот пример кода, он работает нормально.
http://blogs.microsoft.co.il/blogs/alon_nativ/archive/2011/05/30/search-facebook-friends-with-jquery-autocomplete.aspx

person Philip    schedule 17.07.2011