Typeahead.js - suggestion is not a function

Question

After long struggles with Twitters typeahead.js, I'm finally at the point where I get to decide which template I should use for my suggestions.

But although this would seem like a straight-forward procedure, I get the following error:

Uncaught TypeError: g.templates.suggestion is not a function

My code looks like this

HTML:

<input id = "search" type="text" placeholder="Colors">

Javascript:

var colors = ["red", "blue", "green", "yellow", "brown", "black"];

var colorsource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in "The Basics"
  local: colors
});

$('#search').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'color',
  source: colorsource,
  templates: {
  empty: [
    '<div class="empty-message">',
      'unable to find any Best Picture winners that match the current query',
    '</div>'
  ].join('\n'),
  suggestion: '<div>{{color}}</div>'
}
});

I've seen examples where Handlebars.js is being used to compile the template, but I'm planning on using variables from Angular.js in my suggestions, so I don't want to do that.

Any suggestions on how this problem can be solved would be appreciated.

Answer 1

You suggestion options must be a function that returns the HTML, e.g.

...
suggestion: function(e) { return ('<div>' + e.value + '</div>'); }
...