你如何解決實時搜索的「滯後」問題？

嗨，我在我的webapp中實現了實時搜索（=鍵入搜索）功能。目前我正在使用keyup事件通過ajax post發送搜索請求，例如，你如何解決實時搜索的「滯後」問題？

$('#SearchField').keyup(function(e) { 
     $.post(
      ... 
     ); 
});

但是這會導致某種滯後問題，在某些情況下，當我搜索，例如「問題」後，對「親」的反應顯示了這樣的「問題」的迴應之後，並覆蓋正確的搜索結果，以達到最佳效果。

什麼將是一種很好的方法來打擊這種行爲？

TIA

來源

2010-02-19 marc.d

爲什麼不輪詢文本框的變化每0.5 - 1.0秒而不是？ – Skilldrick 2010-02-19 14:48:17

可以中止先前請求

var xhr = null; 
$('#SearchField').keyup(function(e) { 
    if (xhr !== null) xhr.abort(); 
    xhr = $.post(
    ... 
); 
});

或設置給ID每個請求。當一個請求完成時，如果一個更大的id已經回來，忽略該答案。否則，存儲該ID。

來源

2010-02-19 14:51:46 Mathieu

$('#SearchField').keyup(function(e) { 
    t = setTimeout(function(){   
    $.post(
      ... 
    ); 
    },1000); 
});

有了這個代碼，您的函數將1000毫秒後執行。如果keyup被再次觸發，它將覆蓋該變量，並有效地取消第一個函數。換句話說，整個帖子不會發生，直到用戶停止輸入1秒。

來源

2010-02-19 14:49:27

我已經實施了一次「實時搜索」，並使用超時僅在沒有輸入一段時間（半秒左右）後纔開始搜索。這樣搜索只會觸發，如果用戶停止鍵入，減少延遲結果和服務器負載。

在你的情況下，我會檢查，如果用戶繼續打字，不會提交搜索或顯示任何遲到的「舊」結果。

來源

2010-02-19 14:49:30 Select0r

大多數自動完成不更換用戶正在輸入 - 它們顯示在下拉然後用戶可以選擇的可能選項。

這裏是一個已經寫得很好的自動完成的一個很好的例子：http://view.jquery.com/trunk/plugins/autocomplete/demo/

來源

2010-02-19 14:53:04 Erik

正如你已經發現，有很多棘手的UI（用戶界面），或者UX（用戶體驗）的問題，參與創建一個偉大的實時搜索體驗。

我離開UI/UX測試在雅虎誰開發他們自己的網絡屬性中使用自動完成控制的鄉親繁重。而更好的消息是，他們已經將它作爲開源發佈：http://developer.yahoo.com/yui/autocomplete/

不是好消息，它不使用JQuery，而是你使用。你可以看看他們的來源，看看他們如何處理多個時間問題等。請注意，他們開始他們的計時器關鍵下來，而不是關鍵。

還有與Flickr如何使用耶和自動完成用於實現在頁面內搜索一個很好的文章：http://code.flickr.com/blog/2009/03/18/building-fast-client-side-searches/

來源

2010-02-19 15:21:50

訣竅是可放棄使用和Ajax隊列，我寫了一個自定義庫爲我創造了實時搜索，過濾器通過20萬條記錄，如黃油（授予優化eav表幫助查詢速度）。還有一個jquery ajax經理插件可用，很好地工作（我需要一些更復雜的東西，所以我寫了我自己的）。你可以設置隊列號碼，中止新的通話等..這種方式沒有得到請求，直到最終用戶輸入

來源

2010-02-20 08:57:41 Matt

你如何解決實時搜索的「滯後」問題？

回答

相關問題