Typeahead.js - 建议不是函数答案

【问题标题】：Typeahead.js - suggestion is not a functionTypeahead.js - 建议不是函数
【发布时间】：2015-08-17 09:11:32
【问题描述】：

在与 Twitter 的 typeahead.js 长期斗争之后，我终于可以决定应该使用哪个模板来提出建议了。

虽然这看起来是一个简单的过程，但我收到以下错误：

未捕获的类型错误：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 中的变量，所以我不想这样做。

任何有关如何解决此问题的建议将不胜感激。

【问题讨论】：

标签： javascript jquery angularjs typeahead.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我正在关注@potatopeelings，但没有出现建议。

这是我的代码

$(document).ready(function () {
    $("#penilai").typeahead({
        source: function (query, process) {
            var countries = [];
            map = {};

            return $.post('/Evaluation/JsonSenaraiPenilai', { query: query }, function (data) {
                $.each(data, function (i, country) {
                    map[country.Evaluator_name] = country;
                    countries.push(country.Evaluator_name);
                });
                process(countries);
            });
        },
        templates: {
            empty: [
                '<div class="empty-message">',
                'unable to find any Best Picture winners that match the current query',
                '</div>'
            ].join('\n'),
            suggestion: function (e) { return ('<div>' + e.Evaluator_name + '-' + e.Evalator_staf_no + '</div>'); }
        },
        updater: function (item) {
            var selectedShortCode = map[item].Evalator_staf_no;
            $("#evalutor").val(selectedShortCode);
            return item;
        }
    });
});

【讨论】：