0

JQuery は私にとっては新しいもので、ajax を使用して検索提案システムをセットアップしました。これはうまく機能しますが、onKeyUp の制限のためにかなり遅くなります。少し読んだ後、イベントにタイマーを設定できることがわかりました。だから私がやろうとしているのは、「prod-name-input」入力フィールドの onKeyUp イベントにタイマーを設定して、2 秒ごとに呼び出されるようにすることです。このオンラインの例をいくつか見つけましたが、コードにうまく適用できませんでした。よろしくお願いします。

私の入力欄

<input onKeyUp="search(this.value)" type="text" class="prod-name-input"/>

JS

function search(searchword) {
        $('.smart-suggestions').load('invoice-get-data.php?searchword=' + searchword);  
    }
4

2 に答える 2

4

最も速い方法は、実際には keydown イベントを使用することです。(常にキーが離されるのではなく、キーが押されたときに動作します。)

var timer;
$(".prod-name-input").keydown(function(){
    var self = this;
    clearTimeout(timer);
    timer = setTimeout(function(){
        $(".smart-suggestions").load('invoice-get-data.php?searchword=' + self.value);
    },250);
});

これにより、ユーザーが 1/4 秒以上入力を停止した場合に結果が読み込まれます。発生しているリクエストが多すぎる場合は、遅延を 500 に増やします。

コメントを付けてコードを 1 行ずつ説明します。

// declare a variable that will hold a reference to the timer we create
var timer;
// bind a keydown event to all existing elements that have the prod-name-input class
$(".prod-name-input").keydown(function(){
    // store a reference to the clicked element so we can access it inside of setTimeout()
    var self = this;
    // clear existing timer stored in the timer variable (if any)
    clearTimeout(timer);
    // create a new timer and store it in the timer variable
    timer = setTimeout(function(){
        // load content
        $(".smart-suggestions").load('invoice-get-data.php?searchword=' + self.value);
    // give the timer a 250ms delay (0.25 seconds or 1/4 of a second)
    },250);
});
于 2012-12-11T18:39:33.503 に答える
0

underscore.jsには、このシナリオを処理するスロットル機能があります。正確なコードの注釈付きソースを確認できます。プロジェクトでunderscore.jsを使用している場合は、ここにいくつかの使用法のドキュメントがあります。

于 2012-12-11T18:47:00.993 に答える