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.

Solution 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.

Solution 2

Yes this is possible - and quite simple I might add. Just place a textbox above your grid (or where ever you want it):

<input type="text" id="search-string" name="search-string" />

And a search button:

<a href="#" id="search-button">Search</a>

And here is the jQuery you need for the click event of that button:

$("#search-button").button().click(function(){
    searchString = $.trim($("#search-string").val());

    // check to see a search term has been entered in the textbox
    if(searchString == ""){
        alert("Please enter a word or phrase before searching!");
        // reset search box value to empty
        $("#search-string").val("").focus();
    }
    else{
        // set your grid's URL parameter to your server-side select file (that queries the DB)
        // we pass one parameter - the search string from the textbox
        $("#your-grid").jqGrid('setGridParam',{url:'crud/full-text-search.php?searchString='+searchString});
        // This line may need to be changed (if you use XML instead of JSON) 
        // It will reload the grid, using the new URL with the search term parameter
        $("#your-grid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');  
    }
});

Of course, in your server side file that queries the DB, you will need to grab that URL parameter containing the search string, and build your query with the correct WHERE clause...

Comments

[hade]

Thanks @FastTrack for your answer! This is good solution if I want to do another query to the server, thanks for that. I was mainly looking for a solution to do a local search once I have fetched all the data at once. Sorry for not being clear enough. I have updated the question.

[FastTrack]

Ahh ok, I understand. Unfortunately, I won't be able to provide a good answer for searching through local data. I know @Oleg will though - he's a jQGrid whiz!

[hade]

Excellent answer! Thank you for your help!

[Happy Coder]

This is simple and elegant. I just have changed the postData using setGridParam and its working !!

[FastTrack]

@HappyCoder awesome! good luck with all your future jQGrid work