Question

我想弄清楚如何让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时，我发现基准由一个包含空元素的长列表组成。

我希望有血腥/先行经验的人可以指出我正确的方向。我现在似乎无法弄明白。感谢。

Answer 1

预先找不到任何姓名＆＃39;预取数据集中的建议对象中的键。

当您定义预先输入时，您说的是＆＃39; displayKey＆＃39;关键是＆＃34;姓名＆＃34;。但是当你完成数据集时，你的过滤器函数（在cropSuggestionEngine中）会返回一个json对象数组，如下所示：[{value: "Andijvie "},{value: "Broccoli "}, ...]

所以没有任何＆＃34;姓名＆＃34;密钥。

如果更改过滤器功能以返回{ Name: crop.Name }，则代码可以正常工作。

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

希望它有所帮助！

如何使用Bloodhound获取Typeahead以使用JSON响应？

1 个答案: