4

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:

$("#search_name").typeahead({
    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\"]}]
Kyle Trauberman
  • 25,414
  • 13
  • 85
  • 121
valk
  • 9,363
  • 12
  • 59
  • 79
  • 1
    That doesn't look like JSON to me. – Lee Meador May 01 '13 at 15:52
  • Sorry, it's a Ruby code, it's converted with to_json, and the output is almost identical, i.e. all :asdf are converted to "asdf" etc. It's just more readable, but anyway, converted it to JSON. – valk May 01 '13 at 17:23

1 Answers1

7

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:

$('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 (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 :)

Ryan Brodie
  • 6,554
  • 8
  • 40
  • 57
  • Thanks a lot Ryan. I was a bit confused about the several versions of typeahead, eventually I used the one from Twitter's default lib on Github: https://github.com/twitter/bootstrap/blob/master/js/bootstrap-typeahead.js. What's confusing about it - is when you download TB from http://twitter.github.io/bootstrap/ it doesn't include the typeahead. Anyway, thanks mate! – valk May 03 '13 at 22:36
  • Side note: Bootstrap does include Typeahead (I just ran into this now), but the version that's included is at least several revisions back. It gives you most of the feature set of auto-completion, but none of the data loading/prefetch/local storage goodness. I wound up using the customizer: http://twitter.github.io/bootstrap/customize.html and turning BS-based Typeahead off entirely. – Marc Bollinger May 15 '13 at 22:52
  • Sure but as the OP referred to Typeahead.js' docs (http://twitter.github.io/typeahead.js) rather than Bootstrap's own Fork I didn't think to mention it. As a heads up, as long as you include `typeahead.js` after `bootstrap.js` you won't run into any compatibility issues. – Ryan Brodie May 16 '13 at 11:56