Come posso fare in modo che la mia ricerca live di jQuery attenda un secondo prima di eseguire la ricerca?

Question

Ho un input di ricerca che invia dati da un input a un file php mentre scrivo. Il file php esegue una ricerca sul mio database e mostra un elenco di opzioni di ricerca. Sai, lo stile ajax è in diretta ricerca.

Il mio problema è, se si digita qualcosa molto veloce, si potrebbe semplicemente effettuare una ricerca delle prime 1 o 2 lettere anche se ne sono state digitate altre 10. Ciò causa alcuni problemi.

mio jQuery sembra un po 'come questo:

$(document).ready(function(){ 
    $('#searchMe').keyup(function(){ 
    lookup(this.value); 
    }); 
}); 

e

function lookup(searchinput) { 

    if(searchinput.length == 0) { 
    // Hide the suggestion box. 
    $("#suggestions").hide(); 
    } else { 

    $('#loading').fadeIn(); 

    $.post("/RPCsearch.php", {queryString: ""+searchinput+""}, function(data){ 
     if(data.length > 0) { 
     $("#suggestions").html(data).show(); 
     $('#loading').fadeOut(); 
     } 
    }); 
    } 
} // lookup 

Quindi sono solo curioso, come posso fare in modo che il mio script attende fino a quando ho finito di battitura prima di eseguire la funzione? La mia logica dice qualcosa come se un tasto non è stato premuto per 200 micro secondi, eseguire la funzione, altrimenti tenere un po '.

Come è fatto?

Answer 1

Facile, utilizzando setTimeout. Naturalmente si desidera un solo timer di andare in una sola volta, quindi è importante utilizzare clearTimeout all'inizio della funzione ...

$(function() { 
    var timer; 
    $("#searchMe").keyup(function() { 
    clearTimeout(timer); 
    var ms = 200; // milliseconds 
    var val = this.value; 
    timer = setTimeout(function() { 
     lookup(val); 
    }, ms); 
    }); 
}); 

Answer 2

1 soluzione in psuedocodarlo:

OnKeyPress() 
    txt = getTxt 
    sleep(200) 
    newTxt = getTxt 
    if (txt == newTxt) // nothing has been typed so do something 
     run my thing 

Answer 3

È davvero dovrebbe guardare utilizzando il plugin jQuery autocomplete. Trovo che questo plugin sia molto utile e già fa ciò di cui hai bisogno. Guarda in particolare il ritardo option, che puoi personalizzare per modificare il tempo di attesa del plug-in dopo l'esecuzione di un tasto.

Answer 4

ho trovato il miglior successo quando si collega l'evento di pressione di un tasto, keydown e keyup ingressi. Safari/FireFox/IE sembrano tutti gestire i tasti speciali (cancella, backspace, ecc.) In modo leggermente diverso ma usare tutti gli eventi insieme sembra coprirlo. L'unico modo in cui funziona l'esecuzione di tutti gli eventi è usare setTimeout in modo che, quando tutti gli attivano, azzeri il timer e alla fine il callback venga eseguito una sola volta.

var delay = 200; 
var search_timer = null; 
$("#searchMe").keydown(function(e) { 
    if(search_timer) { 
     clearTimeout(search_timer); 
    } 
    search_timer = setTimeout(lookup, delay); 
}); 
$("#searchMe").keypress(function(e) { 
    if(search_timer) { 
     clearTimeout(search_timer); 
    } 
    search_timer = setTimeout(lookup, delay); 
}); 
$("#searchMe").keyup(function(e) { 
    if(search_timer) { 
     clearTimeout(search_timer); 
    } 
    search_timer = setTimeout(lookup, delay); 
}); 

Answer 5

questo è felice

$(document).ready(function(){ 

    $("#searchMe").keyup(function() { 

    try{window.clearTimeout(timeoutID);}catch(e){} 
    timeoutID = window.setTimeout(run, 2000); //delay 

    function run() 
    {  //dowhatev 
    var text = $("#searchMe").val(); 
    //$("#showit").html(text);  
    }  
}); 
}); 

Answer 6

Potreste essere interessati al mio bindDelayed jQuery mini-plug. It:

• Consente di specificare un ritardo prima dando il via alla richiesta
• annulla automaticamente qualsiasi richieste precedenti che sono stati programmati per spegnersi
• annulla automaticamente qualsiasi richieste XHR in-aria che erano in corso quando si rendere la vostra richiesta di
• invoca solo il callback per l'ultima richiesta di
  • Se l'utente digita "s", attende abbastanza a lungo per la richiesta di uscire, e quindi i tipi "a", e la risposta per "s "ritorna essere prima della risposta per "sa" non dovrai affrontarla.

La risposta alla domanda originale utilizzando bindDelayed apparirebbe in questo modo:

// Wait 200ms before sending a request, 
// avoiding, cancelling, or ignoring previous requests 
$('#searchMe').bindDelayed('keyup',200,'/RPCsearch.php',function(){ 
    // Construct the data to send with the search each time 
    return {queryString:this.value}; 
},function(html){ 
    // Use the response, secure in the knowledge that this is the right response 
    $("#suggestions").html(html).show(); 
},'html','post'); 

Nel caso in cui il mio sito è giù, ecco il codice del plugin per Stack Overflow posteri:

(function($){ 
    // Instructions: http://phrogz.net/jquery-bind-delayed-get 
    // Copyright: Gavin Kistner, !@phrogz.net 
    // License:  http://phrogz.net/js/_ReuseLicense.txt 
    $.fn.bindDelayed = function(event,delay,url,dataCallback,callback,dataType,action){ 
    var xhr, timer, ct=0; 
    return this.on(event,function(){ 
     clearTimeout(timer); 
     if (xhr) xhr.abort(); 
     timer = setTimeout(function(){ 
     var id = ++ct; 
     xhr = $.ajax({ 
      type:action||'get', 
      url:url, 
      data:dataCallback && dataCallback(), 
      dataType:dataType||'json', 
      success:function(data){ 
      xhr = null; 
      if (id==ct) callback.call(this,data); 
      } 
     }); 
     },delay); 
    }); 
    }; 
})(jQuery);