búsqueda optimizada utilizando ajax y tecla

Question

tengo el siguiente código porque quiero buscar en una base de datos como un usuario está escribiendo en un cuadro de texto. Este código a continuación funciona bien, pero parece un poco ineficiente, ya que si un usuario escribe muy rápido, potencialmente estoy haciendo muchas más búsquedas de las necesarias. Así que si un usuario está escribiendo en "vela"

estoy buscando en "vela", "saili", "sailin", y "vela"

quería ver si había una manera de detectar cualquier tiempo particular entre presionar teclas así que solo busque si el usuario deja de escribir durante 500 milisegundos o algo como esto.

¿hay mejores prácticas para algo como esto?

$('#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

Usted puede hacer algo como esto:

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

Lo que esto hace es realizar una búsqueda (en keyup, mejor que keypress para estas situaciones) después 500ms mediante el almacenamiento de un temporizador en el #searchString elemento de .data() collection . Cada keyup borra ese temporizador, y si se ingresó la tecla, busca inmediatamente, si no se establece otro 500ms tiempo de espera antes de la búsqueda automática.

Answer 2

Lo que yo haría es presionar cada tecla con la función setTimeout con la demora deseada. Entonces esa función se disparará después de ese tiempo de espera. Cada pulsación de tecla luego elimina el temporizador y establece uno nuevo, con clearTimeout();

Vea aquí algunos ejemplos, pasando por todos los anuncios.

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

Answer 3

Ver esta pregunta más:

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