Facebook Estilo de búsqueda AJAX

Question

He creado una búsqueda ajax estilo de Facebook para mi sitio en el que a medida que escribe en él aparecerá el resultado en una bonita lista su búsqueda.

$("#s").keyup(function() { 
    var searchbox = $(this).val(); 
    var dataString = 's='+ searchbox; 
    if(searchbox!='') { 
     $.ajax({ 
      type: "POST", 
      url: "/livesearch.php", 
      data: dataString, 
      cache: false, 
      success: function(html){ 
       $("#display").html(html).show(); 
      } 
     }); 
    } else {return false; } 
}); 

$("body").click(function() { 
     $("#display").hide(); 
}); 

El problema con esto es que es un poco ineficaz ya que el usuario escriba una palabra, por ejemplo "el fútbol". Esto llevará a cabo 8 solicitudes al servidor. ¿Cuál sería una forma más efectiva de hacer esto? idealmente, creo que debería almacenar la solicitud durante 1 segundo antes de hacer una búsqueda en lugar de una clave instantánea. pero no es 100% seguro de cómo hacer eso ...

Answer 1

el método que se está refiriendo a la que se llama "antirrebote"

por lo general tienen una función "de rebote" en la parte inferior de todos mis guiones

var debounce=function(func, threshold, execAsap) { 
    var timeout; 
    return function debounced() { 
     var obj = this, args = arguments; 
     function delayed() { 
      if (!execAsap) 
       func.apply(obj, args); 
      timeout = null; 
     }; 
     if (timeout) 
      clearTimeout(timeout); 
     else if (execAsap) 
      func.apply(obj, args); 
     timeout = setTimeout(delayed, threshold || 100); 
    }; 
}; 

Y entonces cada vez que hago algo que se beneficiarán de una supresión de rebotes que pueda usar de forma genérica

lo que el código sería re-escrito como

$("#s").keyup(debounce(function() { 
    var searchbox = $(this).val(); 
    var dataString = 's='+ searchbox; 
    if(searchbox!='') { 
     $.ajax({ 
       type: "POST", 
       url: "/livesearch.php", 
       data: dataString, 
       cache: false, 
       success: function(html){ 
         $("#display").html(html).show(); 
       } 
     }); 
    } else {return false; } 
} 
,350 /*determines the delay in ms*/ 
,false /*should it execute on first keyup event, 
     or delay the first event until 
     the value in ms specified above*/ 
)); 

Answer 2

Otra opción sería la de comenzar a buscar después de 2/3 caracteres. Esperar 1 segundo antes de hacer todas las solicitudes no me parece bien. También intente enviar menos datos al servidor, lo que también podría acelerar la solicitud y la respuesta.

Answer 3

usted podría tener un objeto JSON sentado en algún lugar y en busca de que en lugar de buscar la base de datos varias veces. No traerá demasiado voladizo, siempre y cuando no sea una lista de 1,000 amigos o algo así.