11

Twitter Typeahead.js 0.10.0 now uses Bloodhound.js to interact with the server.

Is it possible to change the templating engine it uses from handlebars to underscore.js' or knockout.js punches' templating engine?

Ben Smith
  • 19,589
  • 6
  • 65
  • 93
Phil
  • 2,143
  • 19
  • 44

2 Answers2

17

Oh, I was blind to the obvious. In configuring twitter typeahead, in the templates option, in suggestion sub-option; there you can pick your view engine. To illustrate (taken from http://twitter.github.io/typeahead.js/examples/):

$('.example-twitter-oss .typeahead').typeahead(null, {
  name: 'twitter-oss',
  displayKey: 'name',
  source: repos.ttAdapter(),
  templates: {
    suggestion: Handlebars.compile([
      '<p class="repo-language">{{language}}</p>',
      '<p class="repo-name">{{name}}</p>',
      '<p class="repo-description">{{description}}</p>'
    ].join(''))
  }
});

The code above uses Handlebars. But you can use any templating engine that supports compile function. The compile function takes the user template and processes it as need be to get the HTML that needs to be rendered. If you want to use underscore, extend it to support a function called "compile" and reference that. The code illustrating this is below. 

;(function (_) {
    'use strict';

    _.compile = function (templ) {
        var compiled = this.template(templ);
        compiled.render = function (ctx) {
            return this(ctx);
        }
        return compiled;
    }
})(window._);

I got this from Alan Greenblatt. The link is: http://blattchat.com/2013/06/04/twitter-bootstrap-typeahead-js-with-underscore-js-tutorial. His twitter typeahead examples are dated in that they were made for twitter typeahead version 0.9.3 which lacks bloodhound.js. However, it does provide a nice compile function for underscore templating engine.

Now, using underscore templating, the code will look like: 

$('.example-twitter-oss .typeahead').typeahead(null, {
  name: 'twitter-oss',
  displayKey: 'name',
  source: repos.ttAdapter(),
  templates: {
    suggestion: _.compile([
      '<p class="repo-language"><%=language%></p>',
      '<p class="repo-name"><%=name%></p>',
      '<p class="repo-description"><%=description%></p>'
    ].join(''))
  }
});
Phil
  • 2,143
  • 19
  • 44
  • 2
    It seems that just using `_.template()` works as well. – luwes Jun 03 '14 at 06:16
  • @luwes: Thanks for the info. Do you have a jsFiddle handy? – Phil Jun 03 '14 at 14:13
  • 3
    Not right away, sorry. It's just `suggestion: _.template(`. They both return functions anyway, typeahead won't see a difference between **_.compile** and **_.template**. Cheers – luwes Jun 03 '14 at 16:44
  • Any idea how to get it to work with Hogan? I tried `Hogan.compile(...)` but that doesn't work. If you have a solution please see http://stackoverflow.com/questions/24727534/migrating-to-typeahead-0-10-with-hogan -- Thx! – isapir Jul 13 '14 at 23:19
  • Is there an example using knockoutjs templates? – Matt Burland Dec 07 '15 at 16:27
11

The good news is that as stated by Steve Pavarno you don't need a template engine anymore. You can achieve the desired result by passing a function like so:

// ...
templates: {
    suggestion: function(data) { // data is an object as returned by suggestion engine
        return '<div class="tt-suggest-page">' + data.value + '</div>';
    };
}
mdev
  • 1,366
  • 17
  • 23