Bind a function to jQGrid filtering's textboxes?

Question

I've written the following code with jquery :

$('input[type="text"]').keyup(
    function (event) {
        // Allow: backspace, delete, tab, escape, and enter
        if (event.keyCode != 68 && event.keyCode != 186) return;
        var textbox = $(this);
        var clickAttr = textbox.attr('click');
        if (clickAttr != undefined && clickAttr.indexOf('NumericTextBoxKeyPress') > -1) return; 
        var insertedValue = textbox.val();
        insertedValue = insertedValue.replace(/a/g, 'SampleA');
        insertedValue = insertedValue.replace(/b/g, 'SampleB');
        textbox.val(insertedValue);
    }
);

It's OK with normal textboxes, but above code doesn't work for jQGrid filtering's textboxes !

Could you please guide me, how I can bind a keyup function to jQGrid filtering's textboxes ?

Answer 1

If you have the grid and want to bind event at one specified input field of the searching toolbar you can use dataEvents of the searchoptions the corresponding column of the colModel (see here). See the answer for the code example.

If you need to bind some event like keyup to all input fields of the searching toolbar of the grid you can do the following:

var $grid = $("#list"); // the grid

// create the grid
$grid.jqGrid({
    //... jqGrid options
});

// create the searching toolbar with the line like
$grid.jqGrid('filterToolbar', {defaultSearch: 'cn'});

// get all input fields of the searching toolbar
var $toolbarRow = $grid.closest(".ui-jqgrid-view")
                       .find(".ui-jqgrid-htable .ui-search-toolbar");

// make the binding of all input fields to the event which you need
$toolbarRow.find('input[type="text"]').keyup(function (e) {
    // the code of your event handler
});

Answer 2

use jquery live() to bind event

 $('input[type="text"]').live("click", function(){ .... });