Comments on: jqGrid Local Data Live Search

By: maparrar

maparrar — Thu, 01 Mar 2012 11:50:51 +0000

Hi, thanks for the examples. I also made my version. This one allows you to select the columns you want to search. [Hola, gracias por los ejemplos. Yo también hice mi versíon. Esta permite seleccionar las columnas en las que se quiere buscar.]


//Declare variables [Declara las variables]
        var grid=$("#list");
        var columns=new Array();
        //Create the grid [Crea la grilla]
        grid.jqGrid({
            datatype: "xml",
            url:"somFile.php",
            loadonce:true,
            rowNum:-1,
            colNames:['ID','Name','Description','Text'],
            colModel:[
                {name:'id',index:'id',width:50},
                {name:'name',index:'name',width:50},
                {name:'description',index:'description',width:50},
                {name:'text',index:'text',width:50}
            ],
            loadComplete:function(){
                //Empty the columns Array [Borra el Array de columnas]
                columns=new Array();
                //Add the columns to search for [Agrega las columnas en las que se quiere buscar]
                columns.push(grid.jqGrid('getCol','name',true));
                columns.push(grid.jqGrid('getCol','description',true));
            }
        });
        
        //Define the keyup event [Define el evento keyup]        
        $("#gridsearch").keyup(function(){
            //Hide all rows and display only matching
            //[Oculta todas las filas y muestra solo las que coincidan con la búsqueda]
            grid.find(".jqgrow").hide();
            var searchString = $(this).val().toLowerCase();
            for(var i in columns){
                var column=columns[i];
                $.each(column,function(){
                    var value=this.value.toLowerCase();
                    if(value.indexOf(searchString) != -1){
                        $('#'+this.id).show();
                    }
                });
            }
        });

By: Carlo

Carlo — Sun, 14 Aug 2011 04:58:53 +0000

No tienes el ejemplo completo???
o al menos el codigo de data.php

By: Haktan

Haktan — Mon, 04 Jul 2011 01:16:07 +0000

I further developed the Marcin’s code: This one should work!

// Declare variables
var grid = $(“#list”);

//grid complete event
searchColumn =grid.jqGrid(‘getRowData’);
rowid2id =grid.jqGrid(‘getCol’,'name’,true);

//search function
jQuery(‘#gridsearch’).keyup(function () {
var searchString = jQuery(this).val().toLowerCase()
for (row=0; row jQuery.each(searchColumn[row],function(key,value) {
if(value.toLowerCase().indexOf(searchString) != -1) {
jQuery('#'+rowid2id[row].id).show()
return false;
}else{
jQuery('#'+rowid2id[row].id).hide()
}
})

}
});

By: Prakash

Prakash — Fri, 04 Mar 2011 11:38:39 +0000

Will it work for multiple page.

By: wega

wega — Tue, 28 Dec 2010 07:54:06 +0000

Small fix for code of Marcin if uses id column:
[code]
rowId = gridData[row]['id'];
if (rowMatch) {
$('table#list').find('tr#'+rowId).show();
} else {
$('table#list').find('tr#'+rowId).hide();
}
[/code]

By: Neeraj

Neeraj — Fri, 12 Nov 2010 22:52:42 +0000

Hi Thanks for sharing.. yep its working with all columns but the problem is its not searching across the pages. Working on that now …

By: Mike Erickson

Mike Erickson — Tue, 21 Sep 2010 23:03:46 +0000

FWIW, in Marcin code, I can tell the query etc is working but the portion where it hide/show the row, I dont think the jQuery selector is correct. My table construct is

By: Mike Erickson

Mike Erickson — Tue, 21 Sep 2010 23:00:47 +0000

Wow, this i nice little tip! When I first viewed the demo, I was like “wow” but immediately thought, how about searching all columns. Then Marcin contributes, but alas I cant get his code to work. Anybody have this working searching across all columns?

By: Mike Erickson

Mike Erickson — Tue, 21 Sep 2010 21:42:46 +0000

Wow, this i nice little tip (and thanks Marcin for the contribution). When I first viewed the demo, I was like “wow” but immediately thought, how about searching all columns. Then Marcin contributes.

By: Esdras

Esdras — Fri, 17 Sep 2010 16:15:45 +0000

Great Tip!!!
Thanks