Hiệu quả AutoSuggest với jQuery?

Question

Tôi đang làm việc để xây dựng một plugin jQuery AutoSuggest, lấy cảm hứng từ sự chú ý của Apple.

Đây là mã chung:

$(document).ready(function() { 
$('#q').bind('keyup', function() { 

    if($(this).val().length == 0) { 
     // Hide the q-suggestions box 
     $('#q-suggestions').fadeOut(); 
    } else { 
     // Show the AJAX Spinner 
     $("#q").css("background-image","url(/images/ajax-loader.gif)"); 

     $.ajax({ 
      url: '/search/spotlight/', 
      data: {"q": $(this).val()}, 
      success: function(data) { 
       $('#q-suggestions').fadeIn(); // Show the q-suggestions box 
       $('#q-suggestions').html(data); // Fill the q-suggestions box 

       // Hide the AJAX Spinner 
       $("#q").css("background-image","url(/images/icon-search.gif)"); 

      } 
     }); 
    } 
}); 

Vấn đề tôi muốn giải quyết tốt & trang nhã, không giết chết các sever. Ngay bây giờ, mã ở trên sẽ truy cập vào máy chủ mỗi lần bạn nhập một khóa và không chờ đợi để bạn hoàn thành việc nhập văn bản. Cách tốt nhất để giải quyết vấn đề này là gì? A. Giết yêu cầu AJAX trước đó? B. Một số loại bộ nhớ đệm AJAX? C. Thêm một số loại trì hoãn để chỉ gửi .AJAX() khi người đó đã ngừng nhập 300ms trở lên?

Answer 1

Hãy thử sử dụng Ben Alman's Throttle & Debounce plugin

Cho phép bạn "trì hoãn" mọi thứ cho đến khi người dùng hoàn tất.

Đối với một ví dụ về cách sử dụng nó kiểm tra mình example of debouncing with a pretend autocomplete

Mã của bạn sẽ cơ bản trở thành

var qinput = $('#q').bind('keyup', $.debounce(250, function() { 

    if($(this).val().length == 0) { 
     // Hide the q-suggestions box 
     $('#q-suggestions').fadeOut(); 
    } else { 
     // Show the AJAX Spinner 
     qinput.addClass('loading'); 

     $.ajax({ 
      url: '/search/spotlight/', 
      data: {"q": $(this).val()}, 
      success: function(data) { 
       $('#q-suggestions') 
        .fadeIn() // Show the q-suggestions box 
        .html(data); // Fill the q-suggestions box 

       // Hide the AJAX Spinner 
       qinput.removeClass('loading').addClass('search'); 
      } 
     }); 
    } 
})); 

CSS

.loading{ 
    background: url('/images/ajax-loader.gif'); 
} 
.search{ 
    background: url('/images/icon-search.gif'); 
} 

Bạn sẽ lưu ý rằng tôi loại bỏ background-image của bạn css và thay thế chúng bằng addClass/removeClass. Dễ dàng hơn nhiều để quản lý các công cụ css trong các tệp css.

Answer 2

Tôi muốn tìm một biến thể C. Đừng chờ người dùng ngừng nhập, nhưng đợi một lúc (200ms?) Sau lần nhấn phím đầu tiên. Sau đó, sau thời gian đó, bạn sẽ trong nhiều trường hợp đã nhận được các lần nhấn phím bổ sung và sau đó bạn sử dụng các ký tự đã nhập để nhận được tự động đề xuất. Nếu một phím khác được nhấn sau khi gửi yêu cầu, bạn bắt đầu đếm lại.

Và bạn chắc chắn nên thực hiện một số bộ nhớ đệm; mọi người sẽ sử dụng backspace và bạn sẽ phải hiển thị lại danh sách tên.

Answer 3

Plugin tự động hoàn tất có tùy chọn thời gian chờ mà bạn có thể đặt để thực hiện việc này.

http://docs.jquery.com/Plugins/AutoComplete/autocomplete

Answer 4

Tôi không biết, những gì DB bạn đang sử dụng hoặc bạn đang sử dụng tập tin mã hóa cứng !?

nào một điểm khởi đầu tốt là chờ đợi cho một thiểu một nums TOT của chars cho

es .: sau 3 (có nghĩa là một chiều dài từ phút cho mysql tìm kiếm trong hầu hết các trường hợp) chars sau đó bạn có thể bắt đầu tìm kiếm tệp DB hoặc json của bạn!

Tôi nghĩ bạn phải cung cấp cho PHP hoặc những người khác công việc khó khăn như LỌC v.v. trước khi gửi lại phản hồi!

btw tôi nghĩ rằng một trong những Tự động đề tốt nhất là một trong những từ brandspankingnew