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()
    });

});

我不知道我做错了什么，但是typeahead没有使用prefetch。

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响应是键值为'response'的键值。没有工作小提琴，我只能猜测问题。

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文本文件。

Twitter typeahead.js 0.11.1预取不起作用

2 个答案: