Facebook風格AJAX搜索

我創建了一個Facebook風格ajax搜索我的網站，當你鍵入它會帶來結果在你的搜索下面一個不錯的列表。Facebook風格AJAX搜索

$("#s").keyup(function() { 
    var searchbox = $(this).val(); 
    var dataString = 's='+ searchbox; 
    if(searchbox!='') { 
     $.ajax({ 
      type: "POST", 
      url: "/livesearch.php", 
      data: dataString, 
      cache: false, 
      success: function(html){ 
       $("#display").html(html).show(); 
      } 
     }); 
    } else {return false; } 
}); 

$("body").click(function() { 
     $("#display").hide(); 
});

問題在於這是有點無效，因爲用戶會鍵入一個單詞，例如「足球」。這將對服務器執行8個請求。什麼是更有效的方法來做到這一點？理想情況下，我認爲它應該在進行搜索之前存儲請求1秒，而不是立即進行搜索。但不是100％確定該怎麼做...

來源

2009-10-14 Shadi Almosri

你指的是被稱爲「反跳」的方法

我平時都在我的所有腳本

var debounce=function(func, threshold, execAsap) { 
    var timeout; 
    return function debounced() { 
     var obj = this, args = arguments; 
     function delayed() { 
      if (!execAsap) 
       func.apply(obj, args); 
      timeout = null; 
     }; 
     if (timeout) 
      clearTimeout(timeout); 
     else if (execAsap) 
      func.apply(obj, args); 
     timeout = setTimeout(delayed, threshold || 100); 
    }; 
};

然後每當我做任何事情，將有利於底部的「防抖」功能從去抖，我可以用它一般

所以，你的代碼將被重新寫爲

$("#s").keyup(debounce(function() { 
    var searchbox = $(this).val(); 
    var dataString = 's='+ searchbox; 
    if(searchbox!='') { 
     $.ajax({ 
       type: "POST", 
       url: "/livesearch.php", 
       data: dataString, 
       cache: false, 
       success: function(html){ 
         $("#display").html(html).show(); 
       } 
     }); 
    } else {return false; } 
} 
,350 /*determines the delay in ms*/ 
,false /*should it execute on first keyup event, 
     or delay the first event until 
     the value in ms specified above*/ 
));

來源

2009-10-14 22:20:26 ekhaled

當然，你可以玩延遲值來找出最適合你的，對我來說350m/s完美的作品...... 請記住，人們輸入的速度很快，並且每次輸入一個字母時超時會重置爲350ms – ekhaled 2009-10-14 22:24:06

另外，我建議在JS或w/HTTP中緩存結果 - 例如：deboun [500 ms暫停] cws [1000 ms暫停] [backspace] [backspace] [backspace] [500 ms暫停] ce'。如果沒有緩存，你會發送2個'deboun'的請求。 – Piskvor 2009-11-04 14:22:27

很棒！謝謝！ – TaylorOtwell 2010-09-15 18:38:29

另一種選擇是在2/3個字符後開始搜索。等待1秒鐘，然後再提出每個請求對我來說都不太合適。也嘗試發送非常少的數據返回到服務器，這也可能使請求和響應更快。

來源

2009-10-14 19:08:55 Shoban

你有代碼示例嗎？ – 2009-10-14 19:14:10

僞代碼：var prevChars; if（prevChars.length + 3 <= chars.length）{debounce（...）; prevChars =字符; } – Piskvor 2009-11-04 14:20:54

你可能有一個JSON對象坐在某個地方搜索，而不是多次搜索數據庫。它不會帶來太多懸念，只要它不是1,000個朋友的名單或其他東西。

來源

2009-10-14 19:11:11 Garrett

好點 - 預取最多搜索的項目（如果適用），只搜索緩存缺失 – Piskvor 2009-11-04 14:31:16

Facebook風格AJAX搜索

回答

相關問題