如何为 Facebook 好友搜索实现 Typeahead JS？答案

【问题标题】：How to implement Typeahead JS for Facebook Friends Search?如何为 Facebook 好友搜索实现 Typeahead JS？
【发布时间】：2013-11-12 07:21:31
【问题描述】：

我已经看过这个question。但这使用了旧的 Bootstrap Typeahead，我现在正在尝试使用 Typeahead JS 来自动完成 Facebook 朋友。好吧，我想做的是从 Facebook 获取朋友列表并使用它来填充输入文本字段。我正在使用以下代码行获取 facebook 好友列表。

FB.login(function(response) {
    if (response.authResponse) {
        var uid = response.authResponse.userID;
        access_token = response.authResponse.accessToken;
        //alert('login success');
        $.getJSON("https://graph.facebook.com/me/friends?access_token=" + access_token, function(result) {
            var friends_list = result;
            alert(friends_list.data[0].name);
        });
    } else {
        //alert('not logged in');
        location.reload();
    }
});

此代码位于登录页面 (/) 中。这完美地工作并且警报功能正确显示名称。在此之后，我希望它与我需要为其提供 JSON Prefetch URL 的 Typeahead JS 一起使用。当我尝试使用与位于另一个页面 /login/landing 中的 Typeahead JS 相同的 URL 时，控制台显示 403 错误。

我尝试像这样在 Typeahead JS 中使用它：

  $(document).ready(function() {
      $('.example-countries .typeahead').typeahead({
          name: 'jsonvar_string',
          prefetch: "'https://graph.facebook.com/me/friends?access_token='+access_token",
          template: ['<p class="repo-language">{{data{{name}}}}</p>', '<p class="repo-name">{{data{{id}}}}</p>'].join(''),
          engine: Hogan
      });
  });

没有用。因此，我尝试解析 Javascript 变量以仅获取朋友的姓名，并将 JSON 对象用作 Typeahead 中的 'local' 参数，如下所示：

FB.login(function(response) {
    if (response.authResponse) {
        //alert('Hi there');
        var uid = response.authResponse.userID;
        access_token = response.authResponse.accessToken;
        alert('login success');
        $.getJSON("https://graph.facebook.com/me/friends?access_token=" + access_token, function(result) {
            var friends_list = result;
            var friends_list_length = Object.keys(friends_list.data).length;
            var jsonvar = [];
            for (var i = 0; i < friends_list_length; i++) {
                jsonvar.push(friends_list.data[i].name);
            }
            jsonvar_string = JSON.stringify(jsonvar);
            localStorage.jsonvalue = jsonvar_string;
            window.location.href = "/login/landing";
        });
    } else {
        alert('not logged in');
        location.reload();
    }
});

即使这样也没有用。我的 Facebook 的 API 调用返回 JSON，如下所示：

{
   "data": [
      {
         "name": "ABCD",
         "id": "1234455"
      },
      {
         "name": "PQRSTV",
         "id": "789456"
      },
      {
         "name": "LKJHMN",
         "id": "456789"
      }
   ],
   "paging": {
      "next": "https://graph.facebook.com/12343434/friends?access_token=CAAJVBDOfUeQBAadfASDFdfdkdERdfdg8pVgJCMbSwIkWyQ0tIjNwoPPIjni7JeMyMbkeTNmxsKRiUe3q0h74Ngl3Ylue2Oz0XlepxUgZBoASpkSted2WV414ziawNZAHW68vLgCArRyxC8vNPeVmoZAueqnL1COrdSvkSItkVXbYVbueUZAhyBwZDZD&limit=5000&offset=5000&__after_id=100006343431073"
   }
}

无论如何解析我收到的 JSON 以直接在 Typeahead JS 中使用它或任何其他方式来实现它？

【问题讨论】：

标签： javascript facebook facebook-graph-api typeahead typeahead.js

【解决方案1】：

您必须将name 密钥转换为value 或tokens。 Typeahead.js 只识别自动完成这些键中写入的内容。

我在使用 Twitter API 时遇到了同样的问题。可能会有所帮助：how to integrate typeahead.js with twitter api

【讨论】：