Wydajny AutoSuggest z jQuery?

Question

Pracuję nad stworzeniem wtyczki jQuery AutoSuggest, zainspirowanej reflektorem firmy Apple.

Oto ogólny kod:

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

      } 
     }); 
    } 
}); 

Kwestia Chcę rozwiązać również & elegancko, nie zabija sever. W tej chwili powyższy kod trafia na serwer za każdym razem, gdy wpisujesz klucz i nie czeka, aż w zasadzie skończysz pisać. Jaki jest najlepszy sposób na rozwiązanie tego problemu? A. Zabij poprzednią prośbę AJAX? B. Jaki typ buforowania AJAX? C. Dodanie pewnego opóźnienia, aby przesłać tylko .AJAX(), gdy osoba przestała pisać przez około 300 ms?

Answer 1

Spróbuj użyć Ben Alman's Throttle & Debounce plugin

Pozwala rzeczy „opóźnienie” aż użytkownik jest wykonywana.

Na przykład, w jaki sposób używać go sprawdzić jego example of debouncing with a pretend autocomplete

Twój kod będzie w zasadzie stać

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ędziesz pamiętać, że usunąłem swój obraz tła css i zastąpił je addClass/removeClass. Znacznie łatwiejsze zarządzanie plikami CSS w plikach css.

Answer 2

Wybrałbym wariant C. Nie czekaj, aż użytkownicy przestaną pisać, ale odczekaj trochę czasu (200 ms?) Po pierwszym naciśnięciu klawisza. Po tym czasie w wielu przypadkach otrzymasz dodatkowe naciśnięcia klawiszy, a następnie użyjesz wpisanych znaków, aby uzyskać autosugest. Jeśli po przesłaniu wniosku zostanie naciśnięty inny klawisz, zaczniesz ponownie odliczać.

I zdecydowanie powinieneś też zrobić buforowanie; ludzie będą używać backspace, a będziesz musiał ponownie wyświetlić listę imion.

Answer 3

Wtyczka autouzupełniania ma opcję limitu czasu, którą można ustawić w tym celu.

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

Answer 4

Nie wiem, co DB używasz LUB używasz Hardcoded plik !?

zresztą dobrym punktem wyjścia jest czekać na najmniej TOT Nums z znaków dla

es .: po 3 (czyli min długość słowo wyszukiwania mysql w większości przypadków) zwęgla następnie można zacznij szukać pliku DB lub json!

myślę, że trzeba dać do PHP lub innych twardą pracę jak FILTROWANIE etc, etc .. przed odesłać responce!

btw myślę jeden z najlepszych Automatyczne sugestie to jeden z brandspankingnew