jQuery获得li元素Ajax的平滑更新

Question

我想知道如何实现流畅的自动完成ul，问题是每当它更新时它都会闪烁，我所说的平滑是指它不会闪烁，更准确地说，就像谷歌一样，每次你输入一些东西时，结果列表都会更新而不眨眼。

我的代码：

$("#uname").on("input", function () {
let data = {"name": $("#uname").val()};
$(".suggested-names ul li").remove(); //remove previous results
$.ajax({
url: "searchInDB.php",
method: "POST",
data: data,
dataType: "json",
success: function (response) {
for(var key in response){
$(".suggested-names ul").append("<li>" + response[key] +"</li>"); //update results
}
}
});
});

该 css：

.suggested-names{
min-width: 100%;
background: #fff;
position: absolute;
z-index: 2;
}
.suggested-names ul{
min-width: 100%;
max-width: 100%;
margin: 0;
padding:0px;
box-shadow: #8c8c8c 0 4px 3px 0;
}
.suggested-names li{
text-decoration: none;
list-style: none;
padding:5px;
font-size: 16px;
color: #0f0f0f;
}
.suggested-names li:hover{
background: #eeeeee;
cursor: pointer;
}
.suggested-names li:last-of-type{
border: none;
}

我的代码向返回字符串数组的 PHP 脚本发出请求，每次用户写入或删除更新的内容时，它看起来都不是很好，它闪烁，我不知道如何解决它，你能帮助我真是太棒了。

而且，如果有更好的方法来做我想做的事情，我愿意倾听你的想法。谢谢

Answer 1

我建议仅在success函数中从ul中删除元素，因为 AJAX 是异步的，并且在删除和插入元素之间存在延迟。

$("#uname").on("input", function () {
let data = {"name": $("#uname").val()};
$.ajax({
url: "searchInDB.php",
method: "POST",
data: data,
dataType: "json",
success: function (response) {
$(".suggested-names ul li").remove(); //remove previous results
for(var key in response){
$(".suggested-names ul").append("<li>" + response[key] +"</li>"); //update results
}
}
});
});

这是演示原理的小提琴。

注意：jQuery弃用了success函数，因此将来请考虑使用.done()。

从文档中：

弃用通知：jqXHR.success((、jqXHR.error(( 和 jqXHR.complete(( 回调从 jQuery 3.0 开始被删除。你可以使用 jqXHR.done((、jqXHR.fail(( 和 jqXHR.always(( 来代替。

另请注意，如果response是一个数组而不是一个对象，则不应使用for(var ... in ...)for 循环，则考虑使用常规 for 进行循环的更好做法。
如果它是一个对象，你应该测试response.hasOwnProperty(key)，否则它将匹配任何扩展Object.prototype的用户定义属性。