使用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

谢谢尼赞。

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

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