Twitter

Question

I use official examples from Twitter . The main problem, I probably don't know how to use the Hogan monster. JS side:

$("#search_name").typeahead({ name: 'name', remote: { url: '/entities/search_autocomplete.json?query=%QUERY', template: '<p><strong>{{id}}</strong> – {{name}}</p>', engine: Hogan } }); 

The server returns data in JSON, structure:

 [{\"id\":1234,\"name\":\"Blah blah...\",\"tokens\":[\"blah...\",\"blah\"]}] 

Answer 1

Just took this code from one of our projects, should help you understand the necessary markup for converting external JSON arrays and output in a custom autocomplete request:

 $('input').typeahead({ header: 'Your Events', template: [ '<img class="ta-thumb" src="https://graph.facebook.com/{{id}}/picture?type=square" />', '<p class="ta-h1">{{name}}</p>', '<p class="ta-p">{{start_time}}</p>' ].join(''), limit: 3, remote: { url: 'https://graph.facebook.com/me/events?access_token=' + access_token, filter: function(parsedResponse) { var dataset = []; for(i = 0; i < parsedResponse.data.length; i++) { dataset.push({ name: parsedResponse.data[i].name, start_time: parsedResponse.data[i].start_time, id: parsedResponse.data[i].id, value: parsedResponse.data[i].name, tokens: [parsedResponse.data[i].id, parsedResponse.data[i].name] }); } return dataset; }, }, engine: Hogan }); 

You need to download the Hogan.js template compiler and include it in your markup (for example, using it as an external script or through a module loader, for example Require.js ). Then the Hogan variable will be set.

I also recommend that you look at calling the Graph API a better understanding of array conversion.

Hope this helps :)