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 peticiones al servidor. ¿Cuál sería una manera más efectiva de hacer esto? Lo ideal sería que creo que debe almacenar la solicitud de 1 segundo antes de hacer una búsqueda en lugar de keyup instantánea. pero no es 100% seguro de cómo hacer que ...

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 a continuación, cada vez que hago todo lo que se beneficiarán de un anti-rebote lo puedo usar de forma genérica

Así 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. Esperando durante 1 segundo antes de hacer cada solicitud no se ve bien para mí. Además, trate de enviar muy menos datos de nuevo al servidor que también podría hacer la petición y una respuesta más rápida.

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á demasiada pendiente, siempre y cuando no sea una lista de 1.000 amigos o algo así.