我正在处理嵌套 getJSON以下代码中的数据，其中返回 > 1 条记录并按自动完成排序。
{
"ok": [
{
"myName": "Back Office",
"myModule": "back01",
"myDesc": "Developing a the platform"
},
......
]
}当最终数据(比如说 6 条匹配记录)传递给 .autocomplete( "instance" ) 时每次调用更新return $( "<li>" )似乎覆盖了之前返回的 JSON 数据，意味着只显示最后一条记录，而不是 6 个有效的 JSON。
我注意到在调试 .autocomplete 例程时循环了正确的次数以匹配记录数，只是每个循环似乎都覆盖了 <li>。使用新对象而不是附加到以前的记录。
为什么会发生覆盖？
谢谢 艺术!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "#my_module_in" ).autocomplete({
minLength: 1,
source: function( request ,response){
$.getJSON("https://api.myapi.com/getStuff", function (data) {
$.each(data, function (okKey, val00) {
if ( okKey === 'ok') {
$.each(val00, function (key201, val201) {
response($.map(data, function (item) {
return {
label: val201.myName,
value: val201.myModule+"_"+val201.myDesc,
}
}))
})
}else{
console.log("error:noJson");
}
})
});
},
focus: function( event, ui ) {
console.log(ui.item.label);
return false;
},
select: function( event, ui ) {
$( "#my_module_in" ).val( ui.item.label);
$( "#my_module" ).val( ui.item.value);
$( "#my_module_description" ).html( ui.item.value );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "<br>" + item.value + "</div>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<div id="my_module_label">Op_Group</div>
<input id="my_module_in">
<input type="hidden" id="my_module">
<p id="my_module_description"></p>最佳答案
您需要一个包含在 $.each ($.map()) 操作中找到的结果的空数组。然后，在 $.map() 函数中，对于每个项目，将当前对象推送到空数组中。
最后，用填充的数组调用response回调函数。
var result = [];
$.each(val00, function(key201, val201) {
$.map(data, function(item) {
result.push({
label: val201.myName,
value: val201.myModule + "_" + val201.myDesc
});
});
});
response(result);
像这样:
$(function() {
$("#my_module_in").autocomplete({
minLength: 1,
source: function(request, response) {
$.getJSON("https://gist.githubusercontent.com/dannyjhonston/51e9ea30dddd09d9f82a8e78b8a51de2/raw/9ad8b1b40377a6807548b444491846dd13025902/getStuff.json", function(data) {
$.each(data, function(okKey, val00) {
if (okKey === 'ok') {
var result = [];
$.each(val00, function(key201, val201) {
$.map(data, function(item) {
result.push({
label: val201.myName,
value: val201.myModule + "_" + val201.myDesc
});
});
});
response(result);
} else {
console.log("error:noJson");
}
});
});
},
focus: function(event, ui) {
console.log(ui.item.label);
return false;
},
select: function(event, ui) {
$("#my_module_in").val(ui.item.label);
$("#my_module").val(ui.item.value);
$("#my_module_description").html(ui.item.value);
return false;
}
})
.autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>").append("<div>" + item.label + "<br />" + item.value + "</div>").appendTo(ul);
};
});<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="my_module_label">Op_Group</div>
<input id="my_module_in" type="text">
<input type="hidden" id="my_module">
<p id="my_module_description"></p>关于javascript - jquery .autocomplete 仅显示集合中的最后一条记录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45061599/