Javascript 如何让Hound的Typeahead使用JSON响应？

我正试图弄清楚如何使用我的JSON结构。我想要的是一个带有预加载JSON对象的类型先行功能，该对象保留在作用域中。以下是部分内容：

Data/All

url返回具有以下结构的

application/json

响应：

[{“Id”：1010，“名称”：“Andijvie”，“类别”：“Blad-en stengel gewassen”}，{“Id”：1020，“名称”：“西兰花”，“类别”：“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>')
        }
    }); 

});

var cropsSuggestionEngine=新猎犬({
datumTokenizer:函数（数据）{
return Bloodhound.tokenizers.whitespace（datum.Name）；
},
queryTokenizer:猎犬，标记，空白，
预取：{
url:“/Crop/All”，
过滤器：功能（数据）{
返回$.map（数据、函数（裁剪）{
返回{
值：crop.Name
};
});
}
}
});
$（函数（）{
cropsSuggestionEngine.initialize（）；
$（'#选择crop.typeahead'）。typeahead({
提示：没错，
推荐理由：没错，
最小长度：1
}, {
名称：“作物”，
displayKey:'名称'，
来源：cropsSuggestionEngine.ttAdapter（），
模板：{
空的：[
'',
'找不到与当前查询匹配的任何结果'，
''
].join（'\n'），
建议：handlebar.compile（“{{{name}}
”）
}
}); 
});

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

---

我希望有猎犬/typeahead经验的人能为我指出正确的方向。我现在似乎无法理解。谢谢。

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

定义typeahead时，您说的是“displayKey”键是“Name”。但是当您完善数据集时，您的筛选函数（在CropsuggestioneEngine中）返回一个json对象数组，如下所示：

[{value:“Andijvie”}，{value:“brocoli”}，…]

所以没有任何“名称”键

如果将筛选函数更改为返回

{Name:crop.Name}

，则代码工作正常

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

---

希望有帮助！

非常感谢您的解释！