gpt4 book ai didi

javascript - 如何让 Bloodhound 的 Typeahead 处理 JSON 响应?

转载 作者:行者123 更新时间:2023-11-30 17:03:41 25 4
gpt4 key购买 nike

我想知道如何获得 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>')
}
});

});

当在预输入字段中输入内容时,它总是会提示没有任何结果与查询相匹配。当我通过 FireBug 查看 DOM 时,我看到数据由一个包含空元素的长列表组成。

我希望有 bloodhound/typeahead 经验的人能给我指出正确的方向。我现在似乎无法弄清楚。谢谢。

最佳答案

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

当您定义 typeahead 时,您说的是“displayKey”键是“Name”。但是当你完善数据集时,你的过滤器函数(在 cropSuggestionEngine 中)返回一个 json 对象数组,如下所示:
[{value: "Andijvie"},{value: "Broccoli"}, ...]

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

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

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

希望对您有所帮助!

关于javascript - 如何让 Bloodhound 的 Typeahead 处理 JSON 响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28420522/

25 4 0
文章推荐: javascript - 在 JavaScript 中拆分此字符串
文章推荐: javascript - 是否有 HQMF 到 QRDA cat 3 计算的简单示例?
文章推荐: javascript - 使用 JavaScript 访问 数据