typeahead.js-未捕获的TypeError：this.displayText（…）.toLowerCase不是函数

Question

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

Uncaught 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"}]

我已经尝试将其他示例中的代码直接复制到我的代码中，有时甚至复制整个代码，但是即使在该示例中可以正常工作，也不能解决该问题。

我该如何解决这个问题，并使模板正常工作？

Answer 1

您可以在GitHub上查看this issue和this issue。看来source中的对象必须具有name属性，或者您必须自己定义displayText函数。链接的第二个问题有一个回应，指出：

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

解决方法是向displayText选项中添加typeahead函数，如下所示：

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

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

Answer 2

解决了问题。将typeahead.js软件包用于以下代码中使用的其他插件。

var search = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/api/search.php?query=%QUERY',
        wildcard: '%QUERY'
    }
});

$('#search-field').typeahead(null, {
    display: 'titleid',
    source: search,
    templates: {
        empty: [
            '<div class="empty-message">',
            'no results found.',
            '</div>'
        ].join('\n'),
        suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{titleid}}</div>')
    }
});

我从中学到了什么？ typeahead.js是一个很难使用的插件。