jquery - 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
a more complex approach involving many fields and conditions - advanced searching

I'd like to know if it's possible to implement a "google style" of universal search where you would only have one text field for search query. If I would write something to that field, it would try to search from all the data in the grid.

EDIT: I would like to fetch all the data once and use the search for that local data set.

See attached picture.

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

to fill the toolbar with the HTML fragment

<div>
    <label for="globalSearchText">Global search in grid for:&nbsp;</label>
    <input id="globalSearchText" type="text">&nbsp;
    <button id="globalSearch" type="button">Search</button>
</div>

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.