jquery - jqGrid auto filter highlighting search result

Question

I want help in highlighting jqgrid row's data part as and when they are matched.

My jqGrid markup:

<div title="Environment variables">
    <div class="jqUIDiv">
        <table id="tblEnvvars" width="100%"></table>
        <div id="EnvvarsGridpager"></div>
    </div>
</div>'

And my jqGrid code:

var envVars=[]; //xml is a xml response sent from server
$(xml).children('product').each(function(){ 
    $(this).children('envvars').each(function(){ 
        $(this).children('variable').each(function(){ 
            var row={};
            isPresent=true;
            row.name=$(this).attr('name');
            row.value=$(this).attr('value');
            envVars.push(row);
        });
    });
});

jQuery("#tblEnvvars").jqGrid({
        datatype: "local",    
        data: envVars,
        colNames:['Name','Value'],
        colModel:[
            {name:'name',index:'name', align:"left"},   
            {name:'value',index:'value', align:"left"}

        ],
        pager : '#EnvvarsGridpager',
        rowNum:10,
        rowList:[10,50,100],
        scrollOffset:0,
        height: 'auto',
        autowidth:true,
        viewrecords: true,
        gridview: true

    });

    jQuery("#tblEnvvars").setGridParam({rowNum:10}).trigger("reloadGrid");
    jQuery("#tblEnvvars").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

for example:

if a row item contains LD_LIBRARY_PATH and user types in LIB in search area, then LIB in LD_LIBRARY_PATH should get highlighted.

Update: 15/12/2011

I found this Highlight plugin to highlight but need help in applying it.

I used it to create the below screenshot

Here is the code i used

jQuery("#list1").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn', afterSearch:highlightIt()});

function highlightIt()
{
$('#list1 > tbody > tr > td').highlight('HOST');
}

Answer 1

Look at the demo from the answer. If you would use beforeSearch (see suggestion from the Justin Ethier comment) you can easy modify the demo to use filterToolbar.

UPDATED: After rereading of your question carefully one more time I fond your idea to highlight the search patterns very interesting. So I created the demo which demonstrate how to implement your requirement. I used the options

loadonce: true,
ignoreCase: true

to make case insensitive local filtering of the data. If you use already local data types (any datatypes excepring 'xml' and 'json') the data will be already hold locally and you don't need to add additional loadonce: true option.

Typing in the searching filter above the grid search patterns the data will be not only filtered by the patterns but the pattern part of very cell in the column will be highlighted which improves the visibility. So you can see the results like on the following picture:

Now about the implementation. First of all I use the Highlight plugin which you found, but I changed the line

spannode.className = 'highlight';

to

spannode.className = 'ui-state-highlight';

to be more compatible to jQuery UI CSS.

I don't use any callback function of the filterToolbar because all the callbacks will be called before the new grid body will be filled. The filterToolbar fill filters part of the postData, set the search parameter of jqGrid to true and trigger reloadGrid. So one should highlight the data inside of loadComplete (or gridComplete) callback because at the moment all data which should be highlighted are in the grid. So I used filterToolbar in the simple form

$("#list1").jqGrid('filterToolbar',
    {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

The implementation of loadComplete you find below:

loadComplete: function () {
    var filters, i, l, rules, rule, iCol, $this = $(this);
    if (this.p.search === true) {
        filters = $.parseJSON(this.p.postData.filters);
        if (filters !== null && typeof filters.rules !== 'undefined' &&
                filters.rules.length > 0) {
            rules = filters.rules;
            l = rules.length;
            for (i = 0; i < l; i++) {
                rule = rules[i];
                iCol = getColumnIndexByName($this, rule.field);
                if (iCol >=0) {
                    $('>tbody>tr.jqgrow>td:nth-child(' + (iCol + 1) +
                        ')', this).highlight(rule.data);
                }
            }
        }
    }
}