Pesquisa de Ajax estilo do Facebook

Question

Eu criei uma pesquisa de Ajax no estilo do Facebook para o meu site, onde, quando você digitar, ele trará os resultados em uma boa lista abaixo da sua pesquisa.

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

O problema é um pouco ineficaz, pois o usuário digitará uma palavra, por exemplo, "futebol". Isso realizará 8 solicitações ao servidor. Qual seria uma maneira mais eficaz de fazer isso? Idealmente, acho que deve armazenar a solicitação por 1 segundo antes de fazer uma pesquisa em vez de instantânea KeyUp. Mas não 100% de certeza de como fazer isso ...

Answer 1

O método ao qual você está se referindo é chamado "Debouncing"

Eu geralmente tenho uma função de "debounce" na parte inferior de todos os meus scripts

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

E então sempre que fizer qualquer coisa que se beneficie de um debounce, posso usá -lo genericamente

Então seu código seria reescrito 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

Outra opção seria começar a pesquisar após 2/3 caracteres. Esperar por 1 segundo antes de fazer todas as solicitações não parece bom para mim. Tente também enviar muito menos dados de volta ao servidor, o que também pode tornar a solicitação e a resposta mais rapidamente.

Answer 3

Você pode ter um objeto JSON em algum lugar e pesquisando isso em vez de pesquisar no banco de dados várias vezes. Não trará muita saliência, desde que não seja uma lista de 1.000 amigos ou algo assim.