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

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

And a search button:

Search

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