Twitter's Bootstrap typeahead setup

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

    name: 'name',
    remote: {
        url: '/entities/search_autocomplete.json?query=%QUERY',
        template: '<p><strong>{{id}}</strong> – {{name}}</p>',
        engine: Hogan

The server is returning the data in JSON, the structure is:

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



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

    header: 'Your Events',
    template: [
    '<img class="ta-thumb" src="{{id}}/picture?type=square" />',
    '<p class="ta-h1">{{name}}</p>',
    '<p class="ta-p">{{start_time}}</p>'
    limit: 3,
    remote: {
        url: '' + access_token,
        filter: function(parsedResponse) {
            var dataset = [];
            for(i = 0; i <; i++) {
                    tokens: [[i].id,[i].name]
            return dataset;
    engine: Hogan

You need to download the Hogan.js template compiler and include it in your markup (e.g. using it as an external script or via a module loader like Require.js). This will then set the Hogan variable.

I'd also recommend looking at that Graph API call to understand the array conversion better.

Hopefully this helps :)


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.