jQuery得到李元素的平滑更新Ajax

我想知道如何實現一個平滑的自動完成ul，問題是，每當它更新它閃爍，通過光滑我的意思是它不閃爍，更準確地採取行動就像谷歌的一樣，每次鍵入內容時，結果列表都會更新而不會閃爍。jQuery得到李元素的平滑更新Ajax

我的代碼：

$("#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腳本返回一個字符串數組，每個用戶寫入或刪除的東西它是時間的請求更新它看起來不太好，它閃爍，我不知道如何解決它，這將是很棒的，你可以幫助我。

而且，如果有更好的方式來做我正在做的事情，我打開了聽你的想法。謝謝

來源

2017-07-08 Heriberto Juarez

我不確定您的意思是平滑自動完成。你實際上沒有問過一個具體的問題。 – Difster

嗯，我看到了，讓我編輯我的問題。好吧，現在編輯。 –

我建議從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：

棄用注意：該jqXHR.success（），jqXHR.error（），和jqXHR.complete（）回調除去的jQuery 3.0。您可以使用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）來代替。

還要注意，如果response是一個數組，而不是一個對象，你不應該使用for(var ... in ...) for循環，這是考慮更好的做法，循環通過它與常規的。
如果它是一個對象，則應該測試response.hasOwnProperty(key)，否則它將匹配擴展Object.prototype的任何用戶定義的屬性。

來源

2017-07-08 05:29:34 Botimoo

哇，非常感謝您的回答，它回答了這個問題，並增加了非常重要的細節，您真棒！ –

jQuery得到李元素的平滑更新Ajax

回答

相關問題