使用typeahead.js返回Facebook好友列表

Question

我正在使用 Facebook Graph API 返回 Facebook 好友列表。然后我想将返回的 JSON 运行到 Typeahead.js 中，如下所示：

$(document).ready(function () {
    $('input.friends').typeahead({
        name: 'friends',
        prefetch: 'https://graph.facebook.com/me/friends?access_token=<?php echo $access_token;?>',
        ttl: 0,
        template: [
            '<p class="name-tag">{{name}}</p>'
          ].join(''),
             engine: Hogan
    });
});

我对应的HTML如下：

<input class="friends typeahead" type="text" placeholder="Start typing" id="friends">

但是使用预取不会返回任何内容（使用硬编码的本地值，没有问题）。我在控制台中没有看到任何有关跨域问题的错误。

我相当确定这是因为 Typeahead 尚未被告知如何处理 JSON 结构，但我不确定如何实现这一点。我尝试过实现模板系统 Hogan（我承认对此并不熟悉），但这并没有帮助。

Answer 1

如果结果是一个简单的对象列表（您想使用其中的特定键作为值），则需要使用

valueKey

，或者使用

filter:

将结果转换为简单的建议列表。

在您的情况下，响应是一个带有

data

成员的对象，该成员是

name, id

对的列表。您可以让

filter()

成为返回

response.data

的函数（从

data

成员中提取列表），然后将

valueKey

设置为

name

。

Answer 2

解决方案如下。如果您使用 Hogan 作为模板引擎，请记住包含 Hogan，就像我所做的那样：

        $.get('https://graph.facebook.com/me/friends?access_token=<?php echo $access_token;?>', function(server_data){

            var rt = {};
                    for (var i in server_data.data)
                      rt[server_data.data[i].id] = {name:server_data.data[i].name, id:server_data.data[i].id},
                       //rt.push({name:server_data.data[i].name})

              console.log(rt)

            $('input.friends').typeahead({
              limit: 10,
              name: 'friends',
              valueKey: 'name',

              local:rt,
              template: [
                  '{{id}}',
              ].join(''),
              engine: Hogan
            });
          })

Answer 3

谢谢尼赞。

我的代码片段目前看起来像：

          valueKey: 'name',
          remote: {
              url: 'https://graph.facebook.com/me/friends?access_token=<?php echo $access_token;?>',
              filter: function (response) {
                  return response.data;
              },
          },
          template: [
              '<p>{{name}}</p>',
          ].join(''),
          engine: Hogan

无论输入框中是什么，都会立即返回 JSON 中的所有名称。

这是过滤器的问题还是其他问题？