Search data using ajax in yii2 (Not Pjax).

I am creating search form in yii2 . I am able to get using form submit but i want to know how can i do this using ajax . I have to achieve search like this link

By form submit i am able to get data but i want to achieve using ajax. I also want to display the result in default gridview. I know Pjax concept in yii2 but that is not how i wanted.


Enclose content in

use yii\widgets\Pjax;


echo GridView::widget([...]);


how suggested in documentation

Thanks Fabrizio Caldarelli For your reply

But i am not using default search I have created my custom search form similar to this link,and want to perform search using ajax.

Post your code

This is my js code

$('#changearange').on('slideStop', function(){

	var range= $('#diamondsearch-gridle').val();



			url : '<?php echo Yii::$app->getUrlManager()->createUrl(["test/index"]); ?>',

			type: 'post',

			contentType: "application/json",

			data: {

				'range' : range,




			beforeSend: function (jqXHR, settings) {

                if (jqXHR && jqXHR.overrideMimeType) {





			success: function(response) {    

				alert('Success is here');




			error: function (jqXHR, textStatus, errorThrown) {







In this way, you are reinventing the wheel.

Yii2 miss yiiGridView.update method, so you have to use Pjax.

It is not helping me much. my question is similar to this link I have to achive like this

If you want to create a search form as, it is enough to use Pjax.

Follow this:

  1. Enclose search form with Pjax:

<div class="search-form">


<?php yii\widgets\Pjax::begin(['id' => 'search-form']) ?>

<?php $form = ActiveForm::begin(['options' => ['data-pjax' => true ]]); ?>


    .... search fields or controls ....


    <div class="form-group">

        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>



<?php ActiveForm::end(); ?>

<?php yii\widgets\Pjax::end() ?>


If you use custom component, you can attach an event handler when change value in this component and update an hidden input field, to be sent to controller when send POST request.

  1. Enclose grid with Pjax:

<?php Pjax::begin(['id' => 'gridData']) ?>

    <?= GridView::widget([

        'dataProvider' => $dataProvider,

        'filterModel' => $searchModel,

        'columns' => [

            ['class' => 'yii\grid\SerialColumn'],



            ['class' => 'yii\grid\ActionColumn'],


    ]); ?>

<?php Pjax::end() ?>

  1. Add a js event handler to update gridview when end submit of Pjax form





        $("#search-form").on("pjax:end", function() {

            $.pjax.reload({container:"#gridData"});  //Reload GridView





Thanks Fabrizio Caldarelli but i want to do without submit button . I want to do on change event.How on echange event search result is displaying in

i did as you told above . It is working fine with submit but how can i achieve by on change . Here is image of my form

If you attach an event handler to html controls and then launch


For example:

$(function() {

   $('input, select').on('change', function() {




I’ve not tested it, but it should work.

[color="#006400"]/* NOTE moved to Yii2 section instead of Yii 1.1.x */[/color]