Is there a way to filter the GridView and have it update on key press instead of having to hit enter?
Is there a way to filter the GridView and have it update on key press instead of having to hit enter?
This is the way I do this (I am not an expert with Yii though, so there may be a better way to achieve this):
I my form, I give the class ‘filter-field’ to all the input fields, and then use Javascript to trigger the ‘update’ method of the CGridView on the ‘keyup’ event.
Yii::app()->clientScript->registerScript('search', "
function refreshList()
{
$.fn.yiiGridView.update('id-of-my-cgridview', {
data: $('.search-box form').serialize()
});
}
var timeoutHandle;
$('.filter-field').keyup(function()
{
clearTimeout(timeoutHandle);
timeoutHandle = setTimeout(function() {refreshList()}, 300);
});
$('.filter-field').change(function()
{
refreshList();
});
");
Hi,
Thanks @Tartiflette, your answer was really helpful.
What I finally used is as below, It will re focus the cursor on the last filter.
//Filters search on keyup rather than having to press enter
var timer;
$('#os-customer-grid .filters input[type=text] ').live('keyup', function(e){
var focusedId = $(document.activeElement).attr('id');
clearTimeout(timer);
timer = setTimeout(function() {
$.fn.yiiGridView.update('os-customer-grid', {
data: $('#grid-form').serialize(),
complete: function(jqXHR, status) {
if (status=='success'){
//refocus last filter input box.
$('#' + focusedId).focus();
tmpStr = $('#' + focusedId).val();
$('#' + focusedId).val('');
$('#' + focusedId).val(tmpStr);
}
}
});
}, 300);
});