Effiziente AutoSuggest mit jQuery?

Ich arbeite an einem jQuery AutoSuggest-Plugin, das von Apples Spotlight inspiriert wurde. HierEffiziente AutoSuggest mit jQuery?

ist der allgemeine Code:

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

      } 
     }); 
    } 
});

Die Frage, die ich elegant gut & lösen wollen, ist nicht die Sever zu töten. Im Augenblick trifft der obige Code den Server jedes Mal, wenn Sie einen Schlüssel eingeben, und wartet nicht darauf, dass Sie mit der Eingabe fertig sind. Was ist der beste Weg, dies zu lösen? A. Kill vorherige AJAX-Anfrage? B. Eine Art von AJAX-Caching? C. Hinzufügen einer Art von Verzögerung, um nur .AJAX() zu senden, wenn die Person die Eingabe für 300 ms oder so gestoppt hat?

Quelle

2010-03-14 AnApprentice

Haben Sie an der neuen Autocomplete-Plugin von jQuery UI sah http://jqueryui.com/demos/autocomplete/? – PetersenDidIt

jQuery ist kein Akronym. – SLaks

@nobosh: Ich bin nach der Implementierung effizienter Autosuggest ohne Tötung Server und wenn Sie in der Lage, mit etwas zu kommen Sie denken, es wäre effizient, würden Sie die Beispielserver Seite Code teilen? - Vielen Dank. –

Versuchen Sie es mit Ben Alman's Throttle & Debounce plugin

Hier können Sie „Verzögerung“ Dinge, bis der Benutzer erfolgt.

Ein Beispiel, wie es seine example of debouncing with a pretend autocomplete

Besuche verwenden

Ihr Code im Grunde

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 werden würde

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

Sie werden feststellen, dass ich Ihr Hintergrund-Bild entfernt css und ersetzte sie durch addClass/removeClass. Viel einfacher zu verwalten CSS-Dateien in CSS-Dateien.

Quelle

2010-03-14 19:10:55 PetersenDidIt

Klingt interessant, aber das ist eine Menge Code für das, denkst du nicht? – AnApprentice

Wäre nicht 0,7kb nennen viel Code http://github.com/cowboy/jquery-throttle-debounce/raw/v1.1/jquery.ba-throttle-debounce.min.js – PetersenDidIt

True. Wie würden Sie vorschlagen, Throttle im obigen Code zu implementieren? Ich sehe nicht, wie man das Plug-in in dieser Hinsicht verwendet. thxs – AnApprentice

Ich würde für eine Variante von C gehen. Warten Sie nicht, bis Benutzer aufhören zu tippen, sondern warten Sie einige Zeit (200ms?) Nach dem ersten Tastendruck. Nach dieser Zeit erhalten Sie in vielen Fällen zusätzliche Tastenanschläge, und Sie verwenden dann die eingegebenen Zeichen, um die automatische Eingabe zu erhalten. Wenn nach dem Absenden der Anfrage eine andere Taste gedrückt wird, beginnt die Zählung erneut.

Und Sie sollten auf jeden Fall einige Caching tun; Die Leute werden die Rücktaste verwenden und Sie müssen die Namensliste erneut anzeigen.

Quelle

2010-03-14 19:13:01

Thxs, können Sie einige Tipps zur Implementierung eines Delay & Caching anbieten? – AnApprentice

Sie können sich das jQuery-Plugin hier anschauen: http://code.google.com/p/jquery-autocomplete/ Es unterstützt Parameter wie Verzögerung und CacheLength –

Das Autocomplete-Plug-in verfügt über eine Zeitüberschreitungsoption, die Sie festlegen können.

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

Quelle

2010-03-14 19:38:35

Ich weiß nicht, was DB verwenden Sie oder sind Sie fest codierte Datei !?

ohnehin ein guter Ausgangspunkt für eine mindestens ein TOT NUMS von Zeichen warten

es .: nach 3 (dh eine min Wortlänge für die Suche mysql in den meisten Fällen) verkohlt dann können Sie Starten Sie Ihre DB oder JSON-Datei zu durchsuchen!

Ich denke, Sie müssen PHP oder andere den harten Job wie FILTERING usw. geben, etc .. bevor senden Sie die Antwort zurück!

btw ich glaube, eines der besten AutoSuggest ist die von brandspankingnew

Quelle

2010-03-14 19:56:25

Antwort

Verwandte Themen