CODEWITHSUNDEEP
jqgrid
Denis Kralj
Denis Kralj

Reputation: 633

jqgrid set wait time for search toolbar trigger

I have a JQgrid with some data, and I have the toolbar search option enabled. I would like to know if there is a way to tell the toolbar to trigger 2 or 3 seconds after the last character is typed in or alternatively trigger when the user presses enter. Searching through the documentation wiki yielded no results. any idea?

Upvotes: 0

Views: 710

Answers (2)

Oleg
Oleg

Reputation: 221997

If you examine the code of jqGrid which will be used in case of usage searchOnEnter: false option (see here) you will see no option to manage timeout after which searching will be automatically started. The timeout is always 500ms (a half of second). So if you need to have another timeout you have to implement the same behavior in your custom code. You can register your own keydown handler which do the same as searchOnEnter: false option do, but with another timeout. For example

var $grid = $("#grid"), hTimeout;
$grid.jqGrid('filterToolbar', {defaultSearch: "cn", stringResult: true});
$grid.closest(".ui-jqgrid-view")
    .find(">.ui-jqgrid-hdiv .ui-search-toolbar th input")
    .keydown(function (e) {
        var uiKeyCode = $.ui.keyCode,
            keyCode = e.keyCode || e.which;

        if (keyCode === uiKeyCode.ENTER) {
            return false;
        }

        if (keyCode === uiKeyCode.PAGE_UP  || keyCode === uiKeyCode.PAGE_DOWN ||
                keyCode === uiKeyCode.END  || keyCode === uiKeyCode.HOME ||
                keyCode === uiKeyCode.UP   || keyCode === uiKeyCode.DOWN ||
                keyCode === uiKeyCode.LEFT || keyCode === uiKeyCode.RIGHT) {

            return;
        }

        if (hTimeout) {
            clearTimeout(hTimeout);
        }
        hTimeout = setTimeout(function () {
            $grid[0].triggerToolbar();
            hTimeout = undefined;
        }, 3000); // start searching with 3 sec timeout
    });

See the demo.

Upvotes: 3

Mark
Mark

Reputation: 3123

Inside the colModel you could set the searchoptions to a custom function Ex:

searchoptions: {dataInit: function (elem) { AutoOrAfterEnterSearch(elem) }} ...

You could then build the event handlers to trigger a search after a time period or when the enter key was pressed Ex if (e.keyCode == 13) { SearchFunction() };, with every keypress you would need to reset your timer as well. This isn't the complete code to the solution but this should be the right path. I personally use this to build an autocomplete for the search toolbar (which might be better then the timed search in my mind)

Upvotes: 0

Related Questions