Tìm kiếm theo phong cách Facebook AJAX

Question

Tôi đã tạo một tìm kiếm ajax theo phong cách Facebook cho trang web của mình khi bạn nhập nó sẽ hiển thị kết quả trong danh sách đẹp bên dưới tìm kiếm của bạn.

$("#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(); 
}); 

Vấn đề với việc này sẽ không hiệu quả khi người dùng nhập từ ví dụ "bóng đá". Điều này sẽ thực hiện 8 yêu cầu đến máy chủ. Điều gì sẽ là một cách hiệu quả hơn để làm điều này? lý tưởng tôi nghĩ rằng nó nên lưu trữ các yêu cầu trong 1 giây trước khi thực hiện một tìm kiếm thay vì ngay lập tức keyup. nhưng không chắc chắn 100% cách thực hiện điều đó ...

Answer 1

phương pháp mà bạn đang đề cập đến được gọi là "debouncing"

Tôi thường có một "debounce" chức năng ở dưới cùng của tất cả các kịch bản của tôi

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); 
    }; 
}; 

Và sau đó bất cứ khi nào tôi làm bất cứ điều gì mà sẽ được hưởng lợi từ một debounce tôi có thể sử dụng nó quát

vì vậy, mã của bạn sẽ được viết lại như

$("#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*/ 
)); 

Answer 2

Một tùy chọn khác là bắt đầu tìm kiếm sau 2/3 ký tự. Đợi 1 giây trước khi thực hiện mọi yêu cầu không tốt cho tôi. Cũng cố gắng gửi dữ liệu rất ít trở lại máy chủ mà cũng có thể làm cho yêu cầu và phản ứng nhanh hơn.

Answer 3

Bạn có thể có đối tượng JSON đang ngồi ở đâu đó và tìm kiếm thay vì tìm kiếm cơ sở dữ liệu nhiều lần. Nó sẽ không mang lại quá nhiều nhô ra, miễn là nó không phải là một danh sách của 1.000 người bạn hoặc một cái gì đó.