jquery - jQuery顺利更新了li元素Ajax

我想知道如何实现平滑的自动完成功能ul，问题是，每当更新它时，它就会闪烁；平滑地说，我的意思是它不会闪烁，更精确地说，就像Google一样，每次键入内容时，结果列表将更新而不会闪烁。

我的代码：

    $("#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脚本发出请求，该脚本返回一个字符串数组，每次用户写入或删除更新的内容时，它看起来都不会很好，它会闪烁并且我不知道如何解决它，您能帮助我，太好了。

而且，如果有更好的方法来做我想做的事情，我也会倾听您的想法。谢谢

最佳答案

我建议仅在ul函数中从success中删除​​元素，因为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
            }
        }
    });
});

这是一个Fiddle演示原理。

注意：jQuery不推荐使用success函数，因此将来考虑使用.done()代替。

从documentation：


  弃用通知：从jQuery 3.0开始，删除了jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调。您可以改用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）。


还要注意，如果response是数组而不是对象，则不应使用for(var ... in ...) for循环，这是考虑使用常规for循环通过它的更好的做法。
并且，如果它是一个对象，则应测试response.hasOwnProperty(key)，否则它将与扩展Object.prototype的所有用户定义属性匹配。

关于jquery - jQuery顺利更新了li元素Ajax，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44982670/