jqGrid support search toolbar mode, where you can have search toolbar on top of each column of the grid. To use, set the toolbarfilter property to true. You can exclude certain columns from appearing in the search options by setting the search property of the respective column to false.

Another property that plays role in searching is the sopt property of each column, to specify how the grid treats searching. Default is Contains.

When a column is searchable, you can select how end-users will edit it. This is controlled by the stype property and current has two different options - text and select.

In addition to that, you can specify the values end-users will see in value:name pairs in the of Columns - this is especially useful for EditType select. Here is an example

$grid->setSelect("ShipCity", "SELECT DISTINCT ShipCity, ShipCity AS CityName FROM orders ORDER BY 2", false, false, true, array(""=>"All"));

When searching is performed the grid triggers Searching / Searched event which you can use to customize this behaviour.
<?php 
require_once '../../../../php/demo/tabs.php';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/jquery.multiselect.css" />
    <style type="text">
        html, body {
        margin: 0;            /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;    /* Remove scroll bars on browser window */
        font-size: 75%;
        }
        
    </style>
    <script src="../../../../js/jquery.min.js" type="text/javascript"></script>
    <script src="../../../../js/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/ecmascript" src="../../../../js/jquery.multiselect.js"></script>
    <script src="../../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript">         
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    $.jgrid.defaults.width = "700";
    </script>
     
  </head>
  <body>
      <div>
          <?php include ("grid.php");?>
      </div>
      <br/>
      <?php tabs(array("grid.php"));?>
   </body>
</html>
grid.php.
<?php
require_once '../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqGrid.php";
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = 'SELECT a.OrderID, a.RequiredDate, a.ShipName, a.ShipCity, a.Freight FROM orders a';
// Set output format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
//$grid->debug = true;
// Set some grid options
$grid->setGridOptions(array(
    "rowNum"=>10,
    "rowList"=>array(10,20,30),
    "footerrow" => true,
    "userDataOnFooter" => true
    //"sortname"=>"Ordera"
));
// Change some property of the field(s)
$grid->setColProperty("RequiredDate", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y")
    )
);
$grid->setDatepicker('RequiredDate');
$grid->setColProperty("OrderID", array("searchoptions"=>array("sopt"=>array("eq","ne","le","ge","nu"))));
$grid->setColProperty("ShipName", array("width"=>"200", "searchoptions"=>array("sopt"=>array("eq","ne","le","ge","nu","bw"))));

$dataInit = <<< DATAINIT
function(elem) {
    var options = {
        height: "150",
        minWidth : 'auto',
        noneSelectedText: 'Select',
        open: function () {
            var mmenu = $(".ui-multiselect-menu:visible");
            mmenu.css("font-size","11px").width("auto");
            return;
        }
    }, 
    melem = $(elem);
    melem.multiselect(options);
                            
    melem.siblings('button.ui-multiselect').css({
        width: "100%",
        marginTop: "1px",
        marginBottom: "1px",
        paddingTop: "3px"
    });
}
DATAINIT;
$grid->setColProperty('ShipCity', array(
    "searchoptions"=>array(
        "multiple"=>true,
        "dataInit"=>"js:".$dataInit
    )) 
);

// Enable filter toolbar searching
$grid->toolbarfilter = true;
// we set the select for ship city
$grid->setSelect("ShipCity", "SELECT DISTINCT ShipCity, ShipCity AS CityName FROM orders ORDER BY 2", false, false, true);
$onClearVal = <<< CLEAR
function (elem, coli, soptions, defval) {
    if(coli > 0) {
        var name = this.p.colModel[coli].name;
        if(name === 'ShipCity') {
            $(elem).val(defval);
            $(elem).multiselect('refresh');
            $(elem).siblings('button.ui-multiselect').css({
                width: "100%",
                marginTop: "1px",
                marginBottom: "1px",
                paddingTop: "3px"
            });
        }                
    }
}
CLEAR;
$beforeClear = <<< BEFORE
function() {
    var elem = $("#gs_ShipCity");
    elem.val("");
    elem.multiselect('refresh');
    elem.siblings('button.ui-multiselect').css({
        width: "100%",
        marginTop: "1px",
        marginBottom: "1px",
        paddingTop: "3px"
    });                    
}
BEFORE;

$grid->setFilterOptions(array(
    "onClearSearchValue" => "js:".$onClearVal,
    "beforeClear" => "js:".$beforeClear
));


$grid->navigator = true;

$grid->setNavOptions('navigator', array("excel"=>false,"add"=>false,"edit"=>false,"del"=>false,"view"=>false, "search"=>false));
$summaryrows = array("Freight" => array("Freight" => "SUM"));
// Enjoy
$grid->renderGrid('#grid','#pager',true, $summaryrows, null, true,true);