optimierte Suche mit Ajax und Tastendruck

Question

Ich habe den folgenden Code, wie ich eine Datenbank durchsuchen möchte, wie ein Benutzer in ein Textfeld eingibt. Dieser Code unten funktioniert gut, aber es scheint ein wenig ineffizient, als ob ein Benutzer wirklich schnell tippen würde, ich mache möglicherweise mehr Suchen als nötig. Also, wenn ein Benutzer eingeben „Segel“

i auf „Segeln“ bin auf der Suche, „saili“, „sailin“ und „Segel“

Ich wollte sehen, ob es ein Weg war jeden zu erkennen bestimmte Zeit zwischen den Tasten drücken, so nur suchen, wenn der Benutzer für 500 Millisekunden oder so etwas zu stoppen stoppt.

Gibt es Best Practices für so etwas?

$('#searchString').keypress(function(e) { 

    if (e.keyCode == 13) { 

     var url = '/Tracker/Search/' + $("#searchString").val(); 
     $.get(url, function(data) { 
      $('div#results').html(data); 
      $('#results').show(); 
     }); 
    } 
    else { 

     var existingString = $("#searchString").val(); 
     if (existingString.length > 2) { 
      var url = '/Tracker/Search/' + existingString; 
      $.get(url, function(data) { 
       $('div#results').html(data); 
       $('#results').show(); 
      }); 
     } 
    } 

Answer 1

Sie können etwas tun:

$('#searchString').keyup(function(e) { 
    clearTimeout($.data(this, 'timer')); 
    if (e.keyCode == 13) 
     search(true); 
    else 
     $(this).data('timer', setTimeout(search, 500)); 
}); 
function search(force) { 
    var existingString = $("#searchString").val(); 
    if (!force && existingString.length < 3) return; //wasn't enter, not > 2 char 
    $.get('/Tracker/Search/' + existingString, function(data) { 
     $('div#results').html(data); 
     $('#results').show(); 
    }); 
} 

dies Was tut, ist eine Suche durchführen (auf keyup, besser als keypress für diese Situationen) nach 500ms durch einen Timer auf dem #searchString des Elements Speicherung .data() collection . Alle keyup es löscht diesen Timer, und wenn der Schlüssel eingegeben wurde, sucht sofort, wenn es kein anderes 500ms Timeout vor der automatischen Suche festgelegt wurde.

Answer 2

Was ich tun würde, ist jede Taste drücken Sie eine setTimeout-Funktion mit der gewünschten Verzögerung. Diese Funktion wird nach diesem Timeout ausgelöst. Mit jedem Tastendruck löschen Sie den Timer und setzen einen neuen, mit clearTimeout();

Sehen Sie hier einige Beispiele und scrollen Sie an allen Anzeigen vorbei.

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Answer 3

Sehen Sie diese ältere Frage:

How do I make my live jQuery search wait a second before performing the search?