I am using the Facebook Graph API to return a list of Facebook friends. I then want to run the returned JSON into Typeahead.js as follows:
$(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
});
});
My corresponding HTML is as follows:
<input class="friends typeahead" type="text" placeholder="Start typing" id="friends">
But nothing is being returned using the prefetch (with hardcoded, local values, no problem). I am not seeing any errors in the console regarding cross-domain issues.
I am fairly sure this is because Typeahead hasn't been told how to handle the JSON structure, but I am unsure how to achieve this. I have tried implementing the templating system Hogan (which I will admit to being unfamiliar with) but this has not helped.
Solution below. Remember to include Hogan if you're using that as your templating engine, as I have done:
$.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
});
})