Facebook stile AJAX Search

Question

Ho creato un Facebook stile di ricerca ajax per il mio sito, dove durante la digitazione che porterà i risultati in una bella lista qui sotto la tua ricerca.

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

Il problema di questo è che è un po 'inefficace come l'utente dovrà digitare una parola, ad esempio "il calcio". Questo effettuerà 8 richieste al server. Quale sarebbe un modo più efficace per fare questo? idealmente Penso che dovrebbe conservare la richiesta per 1 secondo prima di fare una ricerca piuttosto che keyup istante. ma non sicuro al 100% come fare ...

Answer 1

il metodo a cui ti riferisci si chiama "Antirimbalzo"

Di solito ho una funzione di "rimbalzo" in fondo a tutti i miei script

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 poi ogni volta che faccio tutto ciò che può beneficiare di un antirimbalzo posso usarlo genericamente

Quindi, il codice sarebbe stato ri-scritto come

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

Un'altra opzione sarebbe quella di avviare la ricerca dopo 2/3 caratteri. In attesa di 1 secondo prima di fare ogni richiesta non guardare bene a me. Provate anche di inviare molto meno dati al server di cui potrebbe anche fare la richiesta e la risposta più veloce.

Answer 3

Si potrebbe avere un oggetto JSON seduto da qualche parte e la ricerca che, invece di cercare il database più volte. Non porterà troppo sbalzo, fintanto che non è un elenco di 1.000 amici o qualcosa del genere.