javascript - $.each 循环中的 jQuery UI 自动完成不显示第一次迭代的结果
问题描述
我正在使用“jQuery UI Autocomplete”来过滤 JSON 数据,我正在使用以下代码
<input type="text" name="searchKeywords" id="ninecSearchKeywords" placeholder="How To...">
然后 JS 作为
jQuery(document).ready(function($){
$.getJSON("apiUrl", function(data){
$.each(data, function(key, value){
$("#ninecSearchKeywords").autocomplete({
source: value.keys,
autoFocus: true,
select: function (event, ui) {
window.location = value.pageLink;
}
});
});
});
});
和 JSON 数据是
[
{
pageID: "454",
pageLink: "url",
sectionID: "a599d36c4c7a71ddcc1bc7259a15ac3a",
anchorLink: "anchor1",
keys: [
"Result 1",
"Result 2",
"Result 3"
]
},
{
pageID: "455",
pageLink: "url",
sectionID: "8d993394c892dcaa8683dc4ba4fae21d",
anchorLink: "anchor2",
keys: [
"Result 4",
"Result 5",
"Result 6"
]
},
{
pageID: "456",
pageLink: "url",
sectionID: "dce6920a3408ae9a8e61b75a4e5fd6ca",
anchorLink: "anchor3",
keys: [
"Result 7",
"Result 8",
"Result 9"
]
}
]
这对于#2 和#3 迭代工作正常,我能够搜索结果 4 到结果 9,但对于第一次迭代,即结果 1,2 和 3,下拉列表中没有显示结果。
谁能知道这里出了什么问题?
解决方案
自动完成源不会在循环内更新。首先创建数据,然后将源添加到自动完成。
jQuery(document).ready(function($){
$.getJSON("apiUrl", function(data){
var keys = [];
var keyLinkMap = {};
$.each(data, function(key, value){
for(let i = 0; i <= value.keys.length; i++) {
keys.push({label: value.keys[i], value:value.pageLink});
}
});
$("#ninecSearchKeywords").autocomplete({
source: keys,
autoFocus: true,
select: function (event, ui) {
window.location = value.pageLink;
}
});
});
});
推荐阅读
- laravel - Vue + Laravel:在单个 Vue 组件中包含字体
- c# - 我可以在 C# 中的一行中定义委托、实例和代码吗?
- python - RRuntimeError:loadNamespace(名称)中的错误:没有名为“预测”的包
- ios - 当tableview单元格匹配标准Swift时尝试更新集合视图
- c++builder - 如何获取属性的默认值?
- scala - 当参数超过 1 个时,为什么扩展功能需要参数类型?
- node.js - 将简单的 nodejs 应用程序部署到我的 uni linux vm
- python - scipy.optimize python中的数学域错误
- sql - Oracle:指定月份的日期无效
- selenium - selenium-side-runner 在 Chrome 上运行失败,在 Firefox 上运行良好