How to implement live search in jqgrid plugin?

Question

What is the true way to implement 'keypress'-filtering in jqgrid plugin? I have text input field and i need filter results on keypress in this input by custom jqgrid-table columns.

filterToolbar method added search field for each column, but i need to one global search field for filtering by three custom columns.

For example:

grid.jqGrid({
    url: '/url/to/json',
    datatype: 'json',
    loadonce: true,
    colModel: [
        { label: 'Last Modified', name: 'lastModified', width: 15, sorttype: 'date' },
        { label: 'Campaign Name', name: 'name', width: 35, sorttype: 'text' },
        { label: 'Camp ID', name: 'id', align: 'left', width: 10, sorttype: 'integer' },
        { label: 'Advertiser', name: 'advertiser', width: 15, sorttype: 'text' },
        { label: 'Status', name: 'status', width: 10, sorttype: 'text' },
        { label: 'Flight Dates', name: 'startDate', width: 15, sorttype: 'date' }
    ],
    autowidth: true,
    ...
});

I need to live sort the table by 'name' and 'advertiser' attributes.

UPD. I found the answer, but it does not work in my jqGrid table. My code here:

var grid = $("#jqGrid");

            grid.jqGrid({
                url: '/reportingservice/api/cmp/tagCampaignList',
                datatype: 'json',
                loadonce: true,
                colModel: [
                    { label: 'Last Modified', name: 'lastModified', width: 15, sorttype: 'date', search: false },
                    { label: 'Campaign Name', name: 'name', width: 35, sorttype: 'text', formatter: urlFormat },
                    { label: 'Camp ID', name: 'id', align: 'left', width: 10, sorttype: 'integer', search: false },
                    { label: 'Advertiser', name: 'advertiser', width: 15, sorttype: 'text' },
                    { label: 'Status', name: 'status', width: 10, sorttype: 'text' },
                    { label: 'Flight Dates', name: 'flightDates', width: 15, sorttype: 'date', search: false }
                ],
                autowidth: true,
                height: 500,
                resizable: false,
                rowNum: 50,
                groupColumnShow: false,
                pager: '#jqGridPager',
                pgtext: '{0}',
                toolbar: [true, "top"],
                loadComplete: function () {
                }
            });

            // live search
            $('#t_' + $.jgrid.jqID(grid[0].id))
                .append($("<div><label for=\"globalSearchText\">Global search in grid for:&nbsp;" +
                    "</label><input id=\"globalSearchText\" type=\"text\"></input>&nbsp;" +
                    "<button id=\"globalSearch\" type=\"button\">Search</button></div>"));


            $("#globalSearchText").keypress(function (e) {
                var key = e.charCode || e.keyCode || 0;
                if (key === $.ui.keyCode.ENTER) { // 13
                    $("#globalSearch").click();
                }
            });

            $("#globalSearch").button({
                icons: { primary: "ui-icon-search" },
                text: false
            }).click(function () {
                var rules = [], i, cm,
                    postData = grid.jqGrid("getGridParam", "postData"),
                    colModel = grid.jqGrid("getGridParam", "colModel"),
                    searchText = $("#globalSearchText").val(),
                    l = colModel.length;

                console.log(searchText);

                for (i = 0; i < l; i++) {
                    cm = colModel[i];
                    if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
                        rules.push({
                            field: cm.name,
                            op: "cn",
                            data: searchText
                        });
                    }
                }
                postData.filters = JSON.stringify({
                    groupOp: "OR",
                    rules: rules
                });
                grid.jqGrid("setGridParam", { search: true });
                grid.trigger("reloadGrid", [
                    {page: 1, current: true}
                ]);
                return false;
            });

You should specify much more clear what you do and what you need. Probably the usage of `filterToolbar` ([Toolbar Searching](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching)) with the option `searchOnEnter: false` will solve already your problem. — Oleg, Dec 23 '14 at 13:01
filterToolbar added search field for each column, i need to one global search field for filtering by three custom columns — Sergey Novikov, Dec 23 '14 at 14:11
Probably [the answer](http://stackoverflow.com/a/22717875/315935) provides the solution which you need? — Oleg, Dec 23 '14 at 15:09
You are welcome! I'd recommend you to improve the text of your question (lick on "edit" below of the text). If you don't do this the question can be closed and you could have more problems in posting of the next questions on the stackoverflow. — Oleg, Dec 23 '14 at 15:26
Thank You! I found your solution here: http://www.ok-soft-gmbh.com/jqGrid/OneFieldSearching.htm I updated main post, can you see my update? I can not get it to work. I have no errors, but filtering does nor work. "reloadGrid" method executed correct, i think the problem in postData rules. — Sergey Novikov, Dec 29 '14 at 15:22
You are welcome! Sorry, that I didn't answer you before, but I have a lot of things to do at home now before 1 January celebration. I'm glad that you've found the solution and my old answer do can help you. I wish you Happy New Year! — Oleg, Dec 30 '14 at 11:42

Sergey Novikov · Accepted Answer · 2014-12-30T12:11:18.690

a. Add input into template:

<input id="globalSearchText" class="x-campaigns-filter" type="text" placeholder="Filter by Name, Status or Advertiser">

b. Customize your filters rules. search: false for disable search in this field.

var grid = $("#jqGrid");

grid.jqGrid({
    url: '/reportingservice/api/cmp/tagCampaignList',
    datatype: 'json',
    loadonce: true,
    colModel: [
        { label: 'Last Modified', name: 'lastModified', width: 15, sorttype: 'date', search: false },
        { label: 'Campaign Name', name: 'name', width: 35, sorttype: 'text', formatter: urlFormat },
        { label: 'Camp ID', name: 'id', align: 'left', width: 10, sorttype: 'integer', search: false },
        { label: 'Advertiser', name: 'advertiser', width: 15, sorttype: 'text' },
        { label: 'Status', name: 'status', width: 10, sorttype: 'text' },
        { label: 'Flight Dates', name: 'flightDates', width: 15, sorttype: 'date', search: false }
    ],
    autowidth: true,
    height: '100%',
    resizable: false,
    rowNum: 50,
    groupColumnShow: false
});

$("#globalSearchText").keyup(function () {
    var rules = [], i, cm,
        postData = grid.jqGrid("getGridParam", "postData"),
        colModel = grid.jqGrid("getGridParam", "colModel"),
        searchText = $("#globalSearchText").val(),
        l = colModel.length;

    for (i = 0; i < l; i++) {
        cm = colModel[i];
        if (cm.search !== false && (typeof cm.stype === "undefined" || cm.stype === "text")) {
            rules.push({
                field: cm.name,
                op: "cn",
                data: searchText
            });
        }
    }

    $.extend (postData, {
        filters: {
            groupOp: "OR",
            rules: rules
        }
    });

    grid.jqGrid("setGridParam", { search: true, postData: postData });
    grid.trigger("reloadGrid", [{page: 1, current: true}]);
    return false;
});

How to implement live search in jqgrid plugin?

1 Answers1