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

谢谢Nitzan。

我的代码段目前如下：

          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中的所有名称。

这是过滤器或其他问题吗？

Answer 3

下面的解决方案。如果你正在使用它作为你的模板引擎，请记住包括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
            });
          })

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

3 个答案: