Typeahead.js - 建议不是函数

Question

经过长时间与Twitters typeahead.js的斗争，我终于到了决定使用哪个模板进行建议的地步。

但是，虽然这似乎是一个直接的过程中，我得到以下错误：

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

我的代码看起来像这样

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