Unable to use underscore template with typeahead.js

Question

I am using typeahead.js with underscore template.

my code

this.$("#search-box").typeahead({
    name: 'notes'
    , valueKey: 'Title'
    , template: '<div class="tt-suggestion"><p class="notes-creator-typeahead" style="white-space: normal;"><%= Title %></p></div>'
    , remote: {
        url: '/Notes/Search?query=%QUERY',
        filter: function (response) {
            console.log(response);
            var arr = [];
            for (var i = 0; i < response.length; i++) {
                var item = new Object();
                item.Id = response[i].Id;
                item.Title = response[i].Title;
                arr.push(item);
            }
            return arr;
        }
    }
});

it does not work, it is giving me the following error

Uncaught Error: no template engine specified

How do I fix this ?

Answer 1

After reading this https://github.com/tcrosen/twitter-bootstrap-typeahead/issues/20

here is what i now use and it works, the only change is instead of

template: '<div class="tt-suggestion"><p class="notes-creator-typeahead" style="white-space: normal;"><%= Title %></p></div>'

i am now using

template: _.template('<div class="tt-suggestion"><p class="notes-creator-typeahead" style="white-space: normal;"><%= Title %></p></div>')

here is the full code

this.$("#search-box").typeahead({
        name: 'notes'
        , valueKey: 'Title'
        , template: _.template('<div class="tt-suggestion"><p class="notes-creator-typeahead" style="white-space: normal;"><%= Title %></p></div>')
        , remote: {
            url: '/Notes/Search?query=%QUERY',
            filter: function (response) {
                console.log(response);
                var arr = [];
                for (var i = 0; i < response.length; i++) {
                    var item = new Object();
                    item.Id = response[i].Id;
                    item.Title = response[i].Title;
                    arr.push(item);
                }
                return arr;
            }
        }
    });