如何使用 Bloodhound 获得 Typeahead 以处理 JSON 响应？答案

【问题标题】：How to get Typeahead with Bloodhound to work with a JSON response?如何使用 Bloodhound 获得 Typeahead 以处理 JSON 响应？
【发布时间】：2015-02-09 22:19:29
【问题描述】：

我试图弄清楚如何让typeahead.js with bloodhound.js 与我的 JSON 结构一起工作。我想要的是一个预加载的 JSON 对象的预输入功能，该对象保持在范围内。以下是部分：

Data/All url 返回具有以下结构的application/json 响应：

[{"Id":1010,"Name":"Andijvie", "Category":"Blad-en stengel gewassen"},{"Id":1020,"Name":"Broccoli","Category" :"Blad-en stengel gewassen", (...)]

此外，根据我的观点：

<div id="select-crop">
    <input class="typeahead" type="text" placeholder="Select crop">
</div>

在 JavaScript 中：

var cropsSuggestionEngine = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.Name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: "/Crop/All",
        filter: function (data) {
            return $.map(data, function(crop) {
                return {
                    value: crop.Name
                };
            });
        }
    }
});

$(function() {

    cropsSuggestionEngine.initialize();

    $('#select-crop .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'Crops',
        displayKey: 'Name',
        source: cropsSuggestionEngine.ttAdapter(),
        templates: {
            empty: [
            '<div class="empty-message">',
            'unable to find any results that match the current query',
            '</div>'
            ].join('\n'),
            suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>')
        }
    }); 

});

当在 typeahead 输入字段中输入内容时，它总是会给出消息，即没有任何结果与查询匹配。当我通过 FireBug 查看 DOM 时，我看到 datums 包含一个带有空元素的长列表。

我希望有 Bloodhound/typeahead 经验的人可以为我指明正确的方向。我现在似乎无法弄清楚。谢谢。

【问题讨论】：

标签： javascript jquery json typeahead.js bloodhound

【解决方案1】：

typeahead 在预取数据集中的建议对象中找不到任何“名称”键。

当您定义预输入时，您是在说“displayKey”键是“名称”。但是，当您完善数据集时，您的过滤器函数（在cropSuggestionEngine 中）会返回一个json 对象数组，如下所示：[{value: "Andijvie "},{value: "Broccoli "}, ...]

所以没有任何“名称”键。

如果您将过滤器函数更改为返回{ Name: crop.Name }，则您的代码可以正常工作。

filter: function(data) {
    return $.map(data, function(crop) {
        return {
            Name: crop.Name
        };
    });
}

希望对你有帮助！

【讨论】：

非常感谢您的解释！