Twitter typeahead.js 0.11.1预取无法正常工作

Question

我正在尝试预取整个JSON数据库（55kb），以便与typeahead.js 0.11.1结合使用。 我为此整日苦苦挣扎，发现typeahead.js文档在这方面非常基础。

我的JSON看起来像这样：

[{
    "id": 1,
    "name": "Green"
}, {
    "id": 2,
    "name": "Red"
}, {
    "id": 3,
    "name": "Blue"
}]

和javascript：

$(function() {

    var tagSuggestion = new Bloodhound({
        datumTokenizer: function(d) {
            return Bloodhound.tokenizers.whitespace(d.name);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 10,
        prefetch: {
            url: 'ajax.json-colors.php'
        }
    });

    $('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 2
    }, {
        name: 'tagSuggestion',
        displayKey: 'name',
        source: tagSuggestion.ttAdapter()
    });

});

我不知道自己在做什么错，但是预输入无法与预取一起使用。

Answer 1

也许与此类似的东西可能会起作用：

var tagSuggestion = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: 'ajax.json-colors.php',
        filter: function (data) {
            //console.log(data.response) --> see if this is your data in example above
            return $.map(data.response, function (tags) {
                return {
                    name: tags.name
                };
            });
        }
    }
});

假设在预取中返回的数据是其中包含数据的响应对象的形式。 可能需要根据传递给过滤器的data进行修改。

这是如果ajax响应是键值为“响应”的键值。 没有工作的小提琴，我只能猜测问题。

Answer 2

最后，使用远程功能并更改以下代码来解决问题：

var tagSuggestion = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'ajax.json-colors.php?query=%QUERY',
        wildcard: '%QUERY'
    }
});

$('.typeahead').typeahead({
    minLength: 2,
    highlight: true
},
{
    name: 'search',
    display: 'value',
    source: tagSuggestion
});

看来typeahead不适用于php文件作为预取源，并且仅接受json文本文件。