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

我建议仅在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循环，那么考虑更好的做法是使用常规如果它是一个对象，您应该测试response.hasOwnProperty(key)，否则它将匹配任何扩展Object.prototype的用户定义属性。

jQuery可以顺利更新li元素Ajax

1 个答案: