Yii2 Grid view pjax search on keypress - search

Question

I am trying to update yii2 grid view using pjax on keypress, Like by default in Yii2 grid view searching works on blur or on change event.
What I am looking for to overwrite this functionality on keypress.
Any help will be greatly appreciated. Thanks.

Answer 1

You should do following:
Disable default submit events and bind keyup event on filter inputs.
Focus active input after updating
Here is a simple working example:
var input;
var submit_form = false;
var filter_selector = '#grid-id-filters input';
$("body").on('beforeFilter', "#grid-id" , function(event) {
return submit_form;
});
$("body").on('afterFilter', "#grid-id" , function(event) {
submit_form = false;
});
$(document)
.off('keydown.yiiGridView change.yiiGridView', filter_selector)
.on('keyup', filter_selector, function() {
input = $(this).attr('name');
if(submit_form === false) {
submit_form = true;
$("#grid-id").yiiGridView("applyFilter");
}
})
.on('pjax:success', function() {
var i = $("[name='"+input+"']");
var val = i.val();
i.focus().val(val);
});
View:
<?php \yii\widgets\Pjax::begin(['id' => 'pjax-id']) ?>
<?= GridView::widget([
'id' => 'grid-id',
'dataProvider' => $dataProvider,
'filterModel' => $filterModel,
'columns' => [
'id',
'title'
]
]);?>
<?php \yii\widgets\Pjax::end(); ?>