Typeahead.js - 建议不是一个功能

Question

经过与Twitters typeahead.js的长期斗争之后,我终于可以决定将哪个模板用于我的建议.

但是,虽然这似乎是一个简单的过程,但我收到以下错误:

未捕获的TypeError:g.templates.suggestion不是函数

我的代码看起来像这样

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>'
}
});

我已经看到了Handlebars.js用于编译模板的示例,但我打算在我的建议中使用Angular.js中的变量,所以我不想这样做.

关于如何解决这个问题的任何建议将不胜感激.

Answer 1

您的建议选项必须是返回HTML的函数,例如

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