帶有遠程數據源的Typeahead.js

Question

我有一個輸出的json文件

{"data": ["A", "B", "C", "D", ...]}

我的typeahead.js腳本看起來像

var engine = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: 'list.json',
        filter: function(list) {
            return $.map(list, function(person) { return { name: person }; });
        }
    }
});

engine.initialize();

$('.typeahead').typeahead(null, {
    displayKey: 'name',
    source: engine.ttAdapter()
});

typeahead.js腳本已正確激活，但是它將數據源解釋為僅一個逗號分隔的項目，而不是單獨的項目。 因此，與其“搜索”元素“ A”，“ B”，“ C”等，不如給我一個建議“ A，B，C，...”。

我的腳本有什么問題？ 我已經在http://twitter.github.io/typeahead.js/examples/中遵循了這些示例。

如果我在datumTokenizer，filter和displayKey中都將“ name”更改為“ value”，則根本不會得到任何項目，而只會輸出“ undefined”。 我很確定這是預取中的filter選項無法正常工作。

Answer 1

在過濾器功能中，您正在遍歷對象的屬性：

{"data": ["A", "B", "C", "D", ...]}

在這種情況下，您僅在“數據”上進行迭代。 要遍歷“數據”中的項目，應將list.data傳遞給過濾器函數。 通過這種方式：

var engine = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: 'list.json',
        filter: function(list) {
            return $.map(list.data, function(person) { return { name: person }; });
        }
    }
});