JqGrid Search Delay

Question

I am using jqGrid filter toolbar with searchOnEnter: false option. And it sends requests right after entering some text in the field. In my application, it might be better to wait until the user enters the text that he wants and will look for it when he stops typing. So, is it possible for jqGrid to add a delay before the request is sent to the server?

Answer 1

The correct question is, but jqGrid is not able to specify a timeout before applying automatic search. It is always 500 ms.

If you study the source code of filterToolbar , you will find the following lines that use the searchOnEnter parameter.

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

Thus, you can use almost the same code along with the default searchOnEnter: false option and implement the triggerToolbar call manually after the timeout you need. For example, the following code fragmenter starts searching after a timeout 3 seconds (3000 ms) after entering in the search panel:

 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's the relevant demo:

UPDATED: The free jqGrid fork jqGrid supports the autosearchDelay option (default value is 500) filterToolbar , which can be used in combination with autosearch: true (default) and searchOnEnter: false . Thus, the trick described above is not required. You can just use

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