Can we implement On key up filter option in Yii's cGridview?

Question

I am currently trying to implement automatic filtering in Yii cGridview, By default it filters 'onclick', or 'enter' key press, But I need to change that event to "onkeyup"|

my code is like this

Yii::app()->clientScript->registerScript('search',"   
    $('.filters > td >input').keyup(function(){    
        $('#grid-id').yiiGridView('update', {
            data: $(this).serialize()  
        });
        return false; 
    });
"); 
?>

when I entered the first letter filtering occured, but after filtering and rendering the code fails.. please give me a solution.. Is there any php yii gridview extension which has filtering onkeyup

Answer 1

You need to change the way you attach the keyup listeners. After the gridview refreshed through AJAX, all elements inside the grid are replaced. So there's no keyup attached anymore. You can try something like:

$('body').on('keyup','.filters > td > input', function() {
    $('#grid-id').yiiGridView('update', {
        data: $(this).serialize()  
    });
    return false; 
});

Answer 2

@Michael Härtl's answer is right. But 2 Problem occur when you use this code.

1) When User Search in filter at that time, every time grid will be refresh so focus of input box will be lost.

2) When you search in one filter input and if you go to second input field field at that time first input box will be lost.

So now I have got the solution for that.

Set this java script code on your grid view.

Yii::app()->clientScript->registerScript('search', "
$('body').on('keyup','.filters > td > input', function() {
    $(document).data('GridId-lastFocused',this.name);
    data = $('#GridId input').serialize();
    $('#GridId').yiiGridView('update', {
        data: data 
    });
    return false; 
});

// Configure all GridViews in the page
$(function(){
    setupGridView();
});

// Setup the filter(s) controls
function setupGridView(grid)
{
    if(grid==null)
        grid = '.grid-view tr.filters';
    // Default handler for filter change event
    $('input,select', grid).change(function() {
        var grid = $(this).closest('.grid-view');
        $(document).data(grid.attr('id')+'-lastFocused', this.name);
    });
}

// Default handler for beforeAjaxUpdate event
function afterAjaxUpdate(id, options)
{
    var grid = $('#'+id);
    var lf = $(document).data(grid.attr('id')+'-lastFocused');
    // If the function was not activated
    if(lf == null) return;
    // Get the control
    fe = $('[name=\"'+lf+'\"]', grid);
    // If the control exists..
    if(fe!=null)
    {
        if(fe.get(0).tagName == 'INPUT' && fe.attr('type') == 'text')
            // Focus and place the cursor at the end
            fe.cursorEnd();
        else
            // Just focus
            fe.focus();
    }
    // Setup the new filter controls
    setupGridView(grid);
}

// Place the cursor at the end of the text field
jQuery.fn.cursorEnd = function()
{
    return this.each(function(){
        if(this.setSelectionRange)
        {
            this.focus();
            this.setSelectionRange(this.value.length,this.value.length);
        }
        else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', this.value.length);
            range.moveStart('character', this.value.length);
            range.select();
        }
        return false;
    });
}");

Add this line to your gridview widget code.

'afterAjaxUpdate'=>'afterAjaxUpdate',

For example:

$this->widget('zii.widgets.grid.CGridView', array(
                'id' => 'GridId',
                'afterAjaxUpdate'=>'afterAjaxUpdate',
));