javascript - jqGrid 検索遅延

Question

オプション searchOnEnter: false を指定して jqGrid のフィルター ツールバーを使用します。そして、フィールドにテキストを入力した直後にリクエストを送信します。私のアプリケーションでは、ユーザーが必要なテキストを入力するまで待って、入力をやめたときに検索する方がよい場合があります。それで、リクエストがサーバーに送信される前に遅延を追加するjqGridの可能性はありますか?

Answer 1

正解ですが、jqGrid には自動検索適用前のタイムアウトを指定するオプションがありません。常に 500 ミリ秒です。

ソースコードを調べると、オプションを使用する次の行filterToolbarが見つかります。searchOnEnter

$("input",thd).keydown(function(e){
    var key = e.which;
    switch (key) {
        case 13:
            return false;
        case 9 :
        case 16:
        case 37:
        case 38:
        case 39:
        case 40:
        case 27:
            break;
        default :
            if(timeoutHnd) { clearTimeout(timeoutHnd); }
            timeoutHnd = setTimeout(function(){triggerToolbar();},500);
    }
});

searchOnEnter: falseしたがって、実質的に同じコードをデフォルトオプションと一緒に使用しtriggerToolbar、必要なタイムアウト後に手動での呼び出しを実装できます。たとえば、次のコードのフラグメントは、検索ツールバーに入力してから 3 秒 (3000 ミリ秒) のタイムアウト後に検索を開始します。

var timeoutHnd, k = $.ui.keyCode,
    toSkip = [k.TAB, k.SHIFT, k.ALT, k.ESCAPE, k.LEFT, k.UP, k.RIGHT, k.DOWN, k.HOME, k.END, k.INSERT];
$grid.jqGrid("filterToolbar", {defaultSearch: "cn"});
$grid.closest(".ui-jqgrid-view")
    .find(".ui-jqgrid-hdiv .ui-search-toolbar input[type=text]")
    .keydown(function (e) {
        var key = e.which;
        if (key === k.ENTER) {
            return false;
        }
        if ($.inArray(key, toSkip) < 0) {
            if (timeoutHnd) {
                clearTimeout(timeoutHnd);
                timeoutHnd = 0;
            }
            timeoutHnd = setTimeout(function () {
                $grid[0].triggerToolbar();
                timeoutHnd = 0;
            }, 3000);
        }
    });

対応するデモは次のとおりです。

更新: jqGrid の 無料の jqGrid フォークはautosearchDelayオプション (デフォルト値は 500) をサポートし、(デフォルト値) および とfilterToolbar組み合わせて使用​​できます。したがって、上記のトリックは必要ありません。1つだけ使用できますautosearch: truesearchOnEnter: false

$grid.jqGrid("filterToolbar", {
    searchOnEnter: false,
    autosearchDelay: 3000 // 3 sec
});