AutoSuggest efficace avec jQuery?

Question

Je travaille à la création d'un plugin jQuery AutoSuggest, inspiré par les projecteurs d'Apple.

Voici le code général:

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

      } 
     }); 
    } 
}); 

La question que je veux résoudre bien & avec élégance, ne tue pas le sever. En ce moment, le code ci-dessus frappe le serveur chaque fois que vous tapez une clé et n'attend pas que vous ayez fini de taper. Quelle est la meilleure façon de résoudre cela? A. Tuer une requête AJAX précédente? B. Un type de mise en cache AJAX? C. Ajout d'un certain type de délai pour soumettre uniquement .AJAX() lorsque la personne a cessé de taper depuis 300ms environ?

Answer 1

Essayez d'utiliser Ben Alman's Throttle & Debounce plugin

vous permet de « retard » des choses jusqu'à ce que l'utilisateur se fait.

Pour un exemple sur la façon de l'utiliser, consultez son example of debouncing with a pretend autocomplete

Votre code serait essentiellement devenu

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

Vous remarquerez que j'ai enlevé votre background-image css et les a remplacés par addClass/removeClass. Beaucoup plus facile de gérer les trucs css dans les fichiers CSS.

Answer 2

J'irais pour une variante de C. N'attendez pas que les utilisateurs arrêtent de taper, mais attendez un peu (200ms?) Après la première frappe. Ensuite, après ce temps, vous aurez dans de nombreux cas reçu des frappes supplémentaires et ensuite vous utiliserez les caractères tapés pour obtenir l'autosuggest. Si vous appuyez sur une autre touche après avoir envoyé la demande, vous recommencez à compter.

Et vous devriez certainement faire un peu de mise en cache aussi; les gens vont utiliser le retour arrière et vous devrez à nouveau afficher la liste des noms.

Answer 3

Le plug-in de saisie semi-automatique dispose d'une option de temporisation que vous pouvez définir pour cela.

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

Answer 4

Je ne sais pas, ce que DB utilisez-vous ou êtes-vous en utilisant le fichier hardcoded !?

de toute façon un bon point de départ est d'attendre au moins un FdF NUMS de caractères pour

es .: après 3 (qui est un mot min longueur pour la recherche mysql dans la plupart des cas) carbonise alors vous pouvez commencer à chercher votre fichier DB ou JSON!

Je pense que vous devez donner à PHP ou d'autres le travail dur comme FILTRATION etc, etc .. avant de renvoyer le responce!

BTW, je pense que l'un des meilleurs AutoSuggest est celui de brandspankingnew