Facebook Stil AJAX Suche

Question

Ich habe eine Facebook-Stil Ajax Suche für meine Website erstellt, in dem während der Eingabe wird es die Ergebnisse in einer netten Liste unten Ihre Suche bringen.

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

Das Problem dabei ist, es ist ein wenig unwirksam, wenn der Benutzer ein Wort zum Beispiel „Fußball“ eingeben. Dies wird durchgeführt 8 Anforderungen an den Server. Was wäre ein effektiver Weg, dies zu tun? idealerweise ich denke, es die Anfrage für 1 Sekunde gespeichert werden sollte, bevor eine Suche statt Instant keyup tun. aber nicht 100% sicher, wie das zu tun ...

Answer 1

die Methode, die Sie sich beziehen, ist „Entprellung“ genannt

Ich habe in der Regel eine „Debounce“ Funktion am unteren Rand aller meine Skripte

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

Und dann, wenn ich irgendetwas tun, das von einem debounce profitieren kann ich es verwende allgemein

So Ihr Code neu geschrieben als

sein würde,

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

Eine andere Möglichkeit wäre, nach 2/3 Zeichen die Suche zu starten. Warte auf 1 Sekunde vor jedem antrag mir nicht gut aussehen. Versuchen Sie auch sehr senden weniger Daten an den Server zurück, die auch die Anforderung und Antwort schneller machen könnte.

Answer 3

könnten Sie haben ein JSON-Objekt irgendwo sitzt und dass die Suche stattdessen die Datenbank mehrere Male zu suchen. Es wird nicht zu viel Überhang bringen, solange es nicht eine Liste von 1.000 Freunde oder etwas ist.