Universal search field for jqgrid

Question

I\'m new to jqgrid and I found out that there are four ways to implement a search in jqgrid:

a toolbar searching
a custom searching
a single field searching
         


        

Answer 1

There are many ways to implement such requirement. I prepared two demos which demonstrates one from the possible solution: the first one and the next one. The second demo in enhanced version of the first one where I use higlighting jQuery plugin in the same way like I describe it here.

First of all I add input box with the button to the top toolbar of the grid. I use toolbar: [true, "top"] to add an empty toolbar on the top of the grid. Then I use the following code

$('#t_' + $.jgrid.jqID($grid[0].id))
    .append($("
Global search in grid for: " +
        " " +
        "Search
"));

to fill the toolbar with the HTML fragment

    Global search in grid for: 
     
    Search

To start searching I used the following JavaScript code

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

where $grid is the grid where we start searching (var $grid = $("#list");).

To improve a little the visibility of the elements in the top toolbar I used such simple additional CSS

.ui-jqgrid .ui-userdata { height: auto; }
.ui-jqgrid .ui-userdata div { margin: .1em .5em .2em;}
.ui-jqgrid .ui-userdata div>* { vertical-align: middle; }

The results looks like on the picture below

The second demo uses higlighting plugin to improve visibility of the grid so that the user sees immediately where in the row the searched field are found:

One can sees that during creating of searching filter I skipped columns which have search: false property (like "note" column) and the columns having stype: "select". I used "cn" (contains) filter in all columns.