This method can be called to construct an advanced search form for the grid.

HTML

The search form is defined, first, in the html, positioned above or below the grid definition, as you prefer.

<div id="mysearch"></div>

Calling Convention:

jQuery("#mysearch").filterGrid("#grid_id",{...})

where:
grid_id is the id of the grid to which the search will be applied.
parms is an array of parameters (see below).

Additional Methods

When using filterGrid we can use two additional privileged methods:
triggerSearch - triggers a search to the grid, for example,

var sg = jQuery("#mysearch").filterGrid(...)[0];
sg.triggerSearch();

clearSearch - clears the search form values and triggers the search with empty or default values.

sg.clearSearch();

How this works

When the search is activated, an array of type name:value is posted to the server. Note that this array is added to the postData parameter. We post only fields that have an entered value. When we clear the the search form, the values are deleted from the postData array. When posting to the server, we try to pass, not the name, but the index set in colModel. When the index is not found we use the name.
Additionally, we add a search=true to the posted data.

Parameters

Parameter	Description	Default
gridModel	when set to true, we use the parameters from colModel to construct the search, using the following options from colModel: name, index, edittype, editoptions, search. Additional parameters can be set in colModel to meet the needs only of this method. These specific parameters are: defval: default value for the search field this will be set as initial search. surl: valid only if edittype:'select'; url from where we can get already-constructed select element - e.g., we expect the following html content (square brackets have been substituted for angle brackets so we can see the code): [select] [option value='val1'] Value1 [/option] [option value='val2'] Value2 [/option] ... [option value='valn'] ValueN [/option] [/select] Only fields with search: true are attached to the form. Hidden elements are not included. When false we should construct a filterModel (see below) to perform a search.	false
gridNames	this option works only if gridModel is true. When set to true we use the names from colNames as labels for the search fields.	false
gridToolbar	this option tries to size the input elements so that they match the initial width of the grid columns. Note that when set to true this does not place the search form on the toolbar. If we want to place the search fields above the columns so that they match the column widths, we should set gridModel: true, gridNames:false, gridToolbar: true and then if we have gridid with enabled toolbar - i.e toolbar:[true,"top"] jQuery("#t_"+gridid).filterGrid("#"+gridid,{gridModel: true, gridNames:false, gridToolbar: true});	false
filterModel	The filter model should be used when gridModel is set to false filterModel [ ... {label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}}, ... ] label: the label of the field (text description) name: the name of the column - should equal of the name in colModel. Note that we search on the index of that coulmn. stype: type of input element - can be only 'text' or 'select' defval: default value for the search input element. surl: used only when stype is 'select'; this is a url from where we can get an already-constructed select element - i.e. we expect the following html content: [select] [option value='val1'] Value1 [/option] [option value='val2'] Value2 [/option] ... [option value='valn'] ValueN [/option] [/select] sopt: valid options that can be applied to the element, the same as editoptions from colModel.	[]
formtype	defines how the form should be constructed. Can be 'horizontal' or 'vertical'	"horizontal"
autosearch	When set to true the behavior is as follows: When the user input some value in the input element they can press enter and the search is activated. When a select box is used search is activated when the values of select is changed. When set to false we can use the button to perform the search.	true
formclass	the class that can be applied to the form	"filterform"
tableclass	the class that can be applied to the table (the table is a child of form element)	"filtertable"
buttonclass	class that can be applied to the buttons	"filterbutton"
searchButton	the label of the button that performs the search. (Note - this label does not come from the language files, since the intention is to separate this method so that it can be used anywhere - i.e. without using jqGrid)	"Search"
clearButton	the label of the button that clears the already-entered values	"Clear"
enableSearch	enable/disable the search button	false
enableClear	enable/disable the clear button	false
beforeSearch	event which fires before a search	null
afterSearch	event which fires after the search is performed	null
beforeClear	event which fires before clearing entered values (i.e when clear button is clicked)	null
afterClear	event which fires after clearing entered values	null
url	a separate url for searching values	''
marksearched	when set to true, after a search every column to which search is applied is marked as searchable - e.g., in the upper left corner of the column header a marker is set to indicate that this column is part of the applied search. When we clear the values the markers disappear.	true