5

私はAppleのスポットライトに触発されたjQueryAutoSuggestプラグインの構築に取り組んでいます。

一般的なコードは次のとおりです。

$(document).ready(function() { 
$('#q').bind('keyup', function() {

    if( $(this).val().length == 0) {
        // Hide the q-suggestions box
        $('#q-suggestions').fadeOut();
    } else {
        // Show the AJAX Spinner
        $("#q").css("background-image","url(/images/ajax-loader.gif)");

        $.ajax({
            url: '/search/spotlight/',
            data: {"q": $(this).val()},
            success: function(data) {
                $('#q-suggestions').fadeIn(); // Show the q-suggestions box
                $('#q-suggestions').html(data); // Fill the q-suggestions box

                // Hide the AJAX Spinner
                $("#q").css("background-image","url(/images/icon-search.gif)");

            }
        });
    }
});

私が上手くエレガントに解決したい問題は、サーバーを殺すことではありません。現在、上記のコードは、キーを入力するたびにサーバーにヒットし、基本的に入力が完了するのを待ちません。これを解決するための最良の方法は何ですか？A.以前のAJAXリクエストを強制終了しますか？B.ある種のAJAXキャッシング？C.ある種の遅延を追加して、人が300ミリ秒ほど入力を停止したときにのみ.AJAX（）を送信しますか？

4

4 に答える 4

9

Ben AlmanのThrottle＆Debounceプラグインを使用してみてください

ユーザーが完了するまで物事を「遅らせる」ことができます。

使用方法の例については、オートコンプリートのふりをしてデバウンスする彼の例を確認してください。

あなたのコードは基本的に

var qinput = $('#q').bind('keyup', $.debounce( 250, function() {

    if( $(this).val().length == 0) {
        // Hide the q-suggestions box
        $('#q-suggestions').fadeOut();
    } else {
        // Show the AJAX Spinner
        qinput.addClass('loading');

        $.ajax({
            url: '/search/spotlight/',
            data: {"q": $(this).val()},
            success: function(data) {
                $('#q-suggestions')
                    .fadeIn() // Show the q-suggestions box
                    .html(data); // Fill the q-suggestions box

                // Hide the AJAX Spinner
               qinput.removeClass('loading').addClass('search');
            }
        });
    }
}));

CSS

.loading{
    background: url('/images/ajax-loader.gif');
}
.search{
    background: url('/images/icon-search.gif');
}

あなたは私があなたのbackground-imagecssを削除し、それらをaddClass/removeClassに置き換えたことに気付くでしょう。cssファイル内のcssのものを管理するのがはるかに簡単です。

于 2010-03-14T19:10:55.993 に答える
2

わかりません。どのDBを使用していますか、またはハードコードされたファイルを使用していますか？

とにかく、良い出発点は、少なくともTOTNUMSの文字を待つことです。

es .: 3（ほとんどの場合、mysqlの検索の最小単語長）charsの後、DBまたはjsonファイルの検索を開始できます！

回答を返送する前に、 PHPなどにFILTERINGなどの大変な仕事をしてもらう必要があると思います。

ところで、最高のオートサジェストの1つは、brandspankingnewからのものだと思います

于 2010-03-14T19:56:25.417 に答える
2

Cのバリエーションを選びます。ユーザーが入力を停止するのを待たずに、最初のキーストロークからしばらく（200ミリ秒？）待ちます。その後、多くの場合、追加のキーストロークを受け取り、入力した文字を使用してオートサジェストを取得します。リクエストの送信後に別のキーが押された場合は、カウントを再開します。

そして、あなたは間違いなくいくつかのキャッシングも行うべきです。人々はバックスペースを使用するので、名前リストをもう一度表示する必要があります。

于 2010-03-14T19:13:01.663 に答える
1

オートコンプリートプラグインには、これを行うために設定できるタイムアウトオプションがあります。

http://docs.jquery.com/Plugins/AutoComplete/autocomplete

于 2010-03-14T19:38:35.663 に答える