FacebookのスタイルAJAX検索

Question

私は自分のサイトのためのFacebookのスタイルAJAX検索を作成したところ、あなたはそれがあなたの検索下の素敵なリストに結果が表示されます入力してます。

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

これに伴う問題は、ユーザがたとえば「サッカー」のための単語を入力しますと、それは少し無効ですです。これは、サーバーへの8つの要求を行います。これを行うために、より効果的な方法は何でしょうか？理想的には私はそれが瞬間からkeyupではなく、検索を行う前に、1秒間の要求を保存するべきだと思います。ではなく、100％確かにそれを行う方法を...

Answer 1

あなたが参照している方法は、「デバウンス」

と呼ばれています

私は通常、すべての私のスクリプトの一番下にある「デバウンス」機能を持っている。

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

私はデバウンス恩恵を受ける何かをするたびに。そして、私は一般的にそれを使用することができます。

あなたのコードは

として再記述されますので、

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

別のオプションは2/3文字の後に検索を開始することです。私には良い見ていないすべての要求を行う前に、1秒を待っています。また、また、より高速な要求と応答を行う可能性のあるサーバーに非常に少ないデータの背中を送信しようとします。

Answer 3

あなたはJSONオブジェクトがどこかに座って、それを検索する代わりに、データベースを複数回検索を持つことができます。それは限り、それは千人の友人か何かのリストではありませんように、あまりにも多くのオーバーハングをもたらすことはありません。