0

我正在使用 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 模板系统（我承认对它不熟悉），但这并没有帮助。

任何想法都非常感谢。

非常感谢

4

3 回答 3

0

如果结果是一个简单的对象列表，您需要使用valueKey，您希望从中使用特定键作为您的值，或者使用 afilter:将结果转换为建议的平面列表。

在您的情况下，响应是一个对象，其data成员是对列表name, id。您可以有filter()一个返回的函数response.data（从data成员中提取列表），然后设置valueKey为name.

于 2014-02-03T10:29:53.483 回答
0

谢谢尼赞。

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

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

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

于 2014-02-09T15:22:10.717 回答
0

下面的解决方案。如果您将其用作模板引擎，请记住包括 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
            });
          })
于 2014-02-12T11:41:14.373 回答