CODEWITHSUNDEEP
javascriptjqueryjqgrid
Oleg Volovoda
Oleg Volovoda

Reputation: 43

jqGrid search delay

I use jqGrid's filter toolbar with option searchOnEnter: false. And it sends requests immediately after I entered some text in field. In my application it may be better to wait while user entered text he wanted and search it when he stops typing. So, is in jqGrid posibility to add delay before request will be sent to server?

Upvotes: 4

Views: 1676

Answers (1)

Oleg
Oleg

Reputation: 221997

It's correct question, but jqGrid has no option to specify the timeout before applying of automatically searching. It is always 500 ms.

If you examine the source code of filterToolbar you will find the following lines which uses the searchOnEnter option.

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

So you can use practically the same code together with default searchOnEnter: false option and implement the call of triggerToolbar manually after the timeout which you need. For example the following fragmant of the code start searching after 3 sec (3000 ms) timeout after the typing in the searching toolbar:

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

Here is the corresponding demo:

enter image description here

UPDATED: Free jqGrid fork of jqGrid supports autosearchDelay option (default value is 500) of filterToolbar which can be used in combination with autosearch: true (it's default) and searchOnEnter: false. Thus the trick described above is not required. One can just use

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

Upvotes: 4

Related Questions