我一直在弄乱typeahead.js模板。无论我做什么,我总是收到以下错误:


  未捕获的TypeError:this.displayText(...)。toLowerCase不是typeahead.min.js:2中的函数


我的JavaScript如下所示:

$('#search-field').typeahead({
    display: 'value',
    templates: {
        suggestion: function(data) {
            return '<p><strong>' + data.value + '</strong> – ' + data.titleid + '</p>';
        }
    },
    source: function (query, process) {
        return $.get(root + '/api/search.php', { query: query }, function (data) {
            console.log('data:' + data); //outputs the JSON correctly.
            data = $.parseJSON(data);
            return process(data);
        });
    }
});


/api/search.php如下所示:

[{"value":"Name1","titleid":"Test1"},{"value":"Name2","titleid":"Test2"},{"value":"Name3","titleid":"Test3"}]


我曾尝试将其他示例中的代码直接复制到我的代码中,有时甚至是整篇代码都复制到我的代码中,但这即使在示例中确实可行,也无法解决。

如何解决此问题,并使模板正常工作?

最佳答案

您可以在GitHub上查看this issuethis issue。看来source中的对象必须具有name属性,或者您必须自己定义displayText函数。链接的第二个问题的答复指出:


  该文档应明确指出:“只要提供“名称”属性,或者提供自己的displayText方法,就可以在对象上添加所有希望的属性。


解决方案是在displayText选项中添加typeahead函数,如下所示:

$('#search-field').typeahead({
    ...
    displayText: function (item) { return item.value; }
    ...
});


item.value可以是您希望显示的任何属性。

09-25 16:28