Cómo traer ajax buscar onkeyup con jQuery

Question

My Script para llamar 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);"> 

Pregunta: mientras onkeyup estoy usando AJAX para buscar el resultado. Una vez que el resultado ajax aumenta, el problema se me ocurre.

Por ejemplo Mientras se escribe la palabra clave t recibo resultado Ajax y mientras se escribe te recibo resultado ajax cuando el retardo de tiempo entre dos ajax keyup en algún momento hace que un problema grave.

Cuando escribo te rápidamente. ajax busca t la palabra clave viene tarde, cuando se compara con te. No sé cómo manejar este tipo de casos.

Resultado Mientras se escribe la palabra clave te rápidamente debido a los retrasos ajax. el resultado para la palabra clave t viene.

Creo que lo había explicado hasta el conocimiento del lector.

Answer 1

usted debe comprobar si el valor ha cambiado con el tiempo:

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: se añadió

La variable searchRequest para evitar múltiples solicitudes innecesarias al servidor.

Answer 2

Primero, sugeriré que hacer una llamada ajax en cada tecla no es bueno (y esta es la razón por la que se ejecuta en este problema).

En segundo lugar, si desea utilizar keyup a continuación, mostrar una imagen de carga después de la caja de entrada para mostrar el usuario su todavía carga (uso la carga de imágenes como las que recibe en agregar comentario)

Answer 3

mantener el asimiento del objeto XMLHttpRequest que $.ajax() devoluciones y luego en la próxima tecla, llame a .abort(). Eso debería matar la solicitud anterior de ajax y dejarte hacer la nueva.

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

Par de punteros. En primer lugar, el lenguaje es un atributo obsoleto de javascript. En HTML (5) puede dejar el atributo desactivado o usar type = "text/javascript". En segundo lugar, está utilizando jQuery entonces ¿por qué tiene una llamada de función en línea cuando puede hacer eso con jQuery también?

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

    }); 

}); 

Yo sugeriría dejando un poco de retraso entre el evento keyup y llamar a una función de ajax. Lo que podría hacer es usar setTimeout para verificar que el usuario haya terminado de escribir antes de llamar a su función ajax.

Answer 5

Intente utilizar el jQuery UI autocomplete. Le ahorra muchos códigos de bajo nivel.