Come portare AJAX Search onkeyup con jQuery

Question

il mio script per chiamata AJAX

<script language="javascript"> 
function search_func(value) 
{ 
    $.ajax({ 
     type: "GET", 
     url: "sample.php", 
     data: {'search_keyword' : value}, 
     dataType: "text", 
     success: function(msg){ 
        //Receiving the result of search here 
     } 
    }); 
} 
</script> 

HTML

<input type="text" name="sample_search" id="sample_search" onkeyup="search_func(this.value);"> 

Domanda: mentre onkeyup Sto usando ajax per andare a prendere il risultato. Una volta che il ritardo del risultato dell'ajax aumenta, il problema si verifica per me.

Per esempio Durante la digitazione t parola chiave ricevo risultato Ajax e durante la digitazione te ricevo risultato ajax quando ritardo ajax tra due keyup rende a volte un problema serio.

Quando digito te velocemente. ajax cerca la parola chiave t arriva tardi, quando confronta a te. Non so come gestire questo tipo di casi.

Risultato Durante la digitazione te parola chiave velocemente a causa di ritardi ajax. risultato per la parola chiave t.

Credo di aver spiegato la conoscenza del lettore.

Answer 1

si dovrebbe verificare se il valore è cambiato nel corso del tempo:

var searchRequest = null; 

$(function() { 
    var minlength = 3; 

    $("#sample_search").keyup(function() { 
     var that = this, 
     value = $(this).val(); 

     if (value.length >= minlength) { 
      if (searchRequest != null) 
       searchRequest.abort(); 
      searchRequest = $.ajax({ 
       type: "GET", 
       url: "sample.php", 
       data: { 
        'search_keyword' : value 
       }, 
       dataType: "text", 
       success: function(msg){ 
        //we need to check if the value is the same 
        if (value==$(that).val()) { 
        //Receiving the result of search here 
        } 
       } 
      }); 
     } 
    }); 
}); 

EDIT:

La variabile searchRequest è stato aggiunto per evitare inutili richieste multiple al server.

Answer 2

Prima di tutto suggerirò che effettuare una chiamata ajax su ogni keyup non è buona (e questo è il motivo per cui corri in questo problema).

In secondo luogo, se si desidera utilizzare keyup poi mostrare un carico di immagine dopo casella di input per mostrare all'utente la sua ancora di carico (uso loading image come si ottiene su come aggiungere commenti)

Answer 3

tenere in mano l'oggetto XMLHttpRequest che $.ajax() i rendimenti e quindi alla prossima chiave, chiama .abort(). Questo dovrebbe uccidere la richiesta precedente di ajax e lasciarti fare il nuovo.

var req = null; 

function search_func(value) 
{ 
    if (req != null) req.abort(); 

    req = $.ajax({ 
     type: "GET", 
     url: "sample.php", 
     data: {'search_keyword' : value}, 
     dataType: "text", 
     success: function(msg){ 
        //Receiving the result of search here 
     } 
    }); 
} 

Answer 4

Coppia di puntatori. Innanzitutto, la lingua è un attributo deprecato di javascript. In HTML (5) puoi disattivare l'attributo o usare type = "text/javascript". In secondo luogo, stai usando jQuery, quindi perché hai una chiamata di funzione in linea quando puoi farlo anche con jQuery?

 
$(function(){ 

    // Document is ready 

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

     $.ajax({ 
      type: "GET", 
      url: "sample.php", 
      data: {'search_keyword' : value}, 
      dataType: "text", 
      success: function(msg) 
      { 
       //Receiving the result of search here 
      } 
     }); 

    }); 

}); 

Suggerisco di lasciare un po 'di ritardo tra l'evento keyup e chiamare una funzione Ajax. Quello che potresti fare è usare setTimeout per controllare che l'utente abbia finito di digitare prima di chiamare la tua funzione Ajax.

Answer 5

Provare a utilizzare jQuery UI autocomplete. Salva da molti codici di basso livello.