search textbox in listview

I have this listview

7277

listview1.PNG

and I want to have something like this

7279

listview2.PNG

So that i will type the course name (course_name) in the listview and click on the go button, it will display only the listview of that that kind. Please how do I do it.

model : course




    public function attributeLabels()

    {

        return [

            'course_id' => 'Course ID',

            'course_category_id' => 'Course Category',

            'course_code' => 'Course Short Name',

            'course_name' => 'Course Full Name',

            'course_num' => 'Course ID Number',

            'course_summary' => 'Course Summary',

            'course_start_date' => 'Course Start Date',

            'course_format' => 'Course Format',

            'course_format_no' => 'No.of Sections',

            'course_file_path' => 'Course File',

            'show_grade' => 'Show Grade',

            'created_at' => 'Created At',

            'created_by' => 'Created By',

            'updated_at' => 'Updated At',

            'updated_by' => 'Updated By',

        ];

    }


    public function getCourseCategory()

    {

        return $this->hasOne(CourseCategories::className(), ['course_category_id' => 'course_category_id']);

    }   


    public static function getAllCourse()

    {

        $dataTmp = self::find()->orderBy('course_name')->all();

        $result = yii\helpers\ArrayHelper::map($dataTmp, 'course_id', 'course_name');

        return $result;

    }  



modelSearch :courseSearch




    public function search($params)

    {

        $query = Course::find();


        // add conditions that should always apply here


        $dataProvider = new ActiveDataProvider([

            'query' => $query, 'sort'=> ['defaultOrder' => ['course_id'=>SORT_DESC]],

        ]);


        $this->load($params);


        if (!$this->validate()) {

            // uncomment the following line if you do not want to return any records when validation fails

            // $query->where('0=1');

            return $dataProvider;

        }


        // grid filtering conditions

        $query->andFilterWhere([

            'course_id' => $this->course_id,

            'course_category_id' => $this->course_category_id,

            'course_start_date' => $this->course_start_date,

            'course_format_no' => $this->course_format_no,

            'show_grade' => $this->show_grade,

            'created_at' => $this->created_at,

            'created_by' => $this->created_by,

            'updated_at' => $this->updated_at,

            'updated_by' => $this->updated_by,

        ]);


        $query->andFilterWhere(['like', 'course_code', $this->course_code])

            ->andFilterWhere(['like', 'course_name', $this->course_name])

            ->andFilterWhere(['like', 'course_num', $this->course_num])

            ->andFilterWhere(['like', 'course_summary', $this->course_summary])

            ->andFilterWhere(['like', 'course_format', $this->course_format]);


        return $dataProvider;

    }




view




<?php


use yii\helpers\Html;

use yii\widgets\ActiveForm;

use app\models\CourseCategories;

use app\models\Course;

use yii\helpers\ArrayHelper;

use mihaildev\ckeditor\CKEditor;

use yii\jui\DatePicker;

use kartik\widgets\Select2;

//use dosamigos\datepicker\DatePicker;

//use kartik\date\DatePicker;

use yii\helpers\Url;


/* @var $this yii\web\View */

/* @var $model app\models\Course */

/* @var $form yii\widgets\ActiveForm */

?>

<div class="course-form">

    <?php $form = ActiveForm::begin(); ?>


<!-- GENERAL DETAILS -->

<div class="box box-info">   

  <div class="box-header with-border">

    <h3 class="box-title">General</h3>

      <div class="box-tools pull-right">

        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> 

        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>

      </div>

  </div>

  <!-- /.box-header -->

  <div class="box-body">

    <div class="table-responsive">  

    <div class="col-xs-12 col-lg-12 no-padding">  

        <div class="col-xs-12 col-sm-8 col-lg-8">    

            <?= $form->field($model, 'course_name')->textInput(['maxlength' => 200]) ?>

        </div>

        <div class="col-xs-12 col-sm-4 col-lg-4">

            <?= $form->field($model, 'course_code')->textInput(['maxlength' => 100]) ?>

        </div>

    </div>    

    <div class="col-xs-12 col-lg-12 no-padding"> 

        <div class="col-xs-12 col-sm-4 col-lg-4">

            <?= $form->field($model, 'course_category_id')->widget(Select2::classname(), [

                'data' => ArrayHelper::map(app\models\CourseCategories::find()->all(),'course_category_id','course_category_name'),

                'language' => 'en',

                'options' => ['placeholder' => 'Select Course Category ...'],


             //   'disabled'=>'true',

                'pluginOptions' => [

                    'allowClear' => true

                ],

            ]); ?>            

        </div>

        <div class="col-xs-12 col-sm-4 col-lg-4">





    <?= $form->field($model, 'course_start_date')->widget(yii\jui\DatePicker::className(),

                    [

                      'clientOptions' => [

                          'dateFormat' => 'dd-mm-yyyy',

                          'changeMonth' => true,

                          'changeYear' => true,

                          'autoSize' => true ],

                      'options'=> [

        'class' => 'form-control',

        'placeholder' =>  Yii::t('app', 'Select Date'),

      ]

    ]) ?>

        </div>

        <div class="col-xs-12 col-sm-4 col-lg-4">

            <?= $form->field($model, 'course_num')->textInput(['maxlength' => 20]) ?>

        </div>

    </div>

    </div>

  </div>  

</div> 


<!-- DESCRIPTION -->

<div class="box box-success">   

  <div class="box-header with-border">

    <h3 class="box-title">Description</h3>

      <div class="box-tools pull-right">

        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> 

        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>

      </div>

  </div>

  <!-- /.box-header -->

  <div class="box-body">

    <div class="table-responsive">        


    <div class="col-xs-12 col-lg-12 no-padding">

      <div class="col-xs-12 col-sm-12 col-lg-12"> 

      <?= $form->field($model, 'course_summary')->widget(CKEditor::className(),[

          'editorOptions' => [

              'rows' => 6,

              'preset' => 'full', 

              'inline' => false, 

              'clientOptions' => [

              'filebrowserBrowseUrl' => ''

              ]

              

          ],

      ]); ?>

      </div>

    <div class="col-xs-12 col-sm-12 col-lg-12">

      <?= $form->field($model, 'course_file_path')->fileInput() ?>

    </div>

    </div>

    

    </div>

  </div>  

</div> 


<!-- FORMAT -->

<div class="box box-danger">   

  <div class="box-header with-border">

    <h3 class="box-title">Format</h3>

      <div class="box-tools pull-right">

        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> 

        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>

      </div>

  </div>

  <!-- /.box-header -->

  <div class="box-body">

    <div class="table-responsive">        


      <div class="col-xs-12 col-lg-12 no-padding"> 

        <div class="col-xs-12 col-sm-4 col-lg-4">

          <?= $form->field($model, 'course_format')->dropDownList($model->getCourseFormat(),['prompt'=>'Select Course Format']) ?>

        </div>  

        <div class="col-xs-12 col-sm-4 col-lg-4">

          <?= $form->field($model, 'course_format_no')->dropDownList(['' => Yii::t('app', '--- Select No. of Sections ---'), 

          '1' => '1','2' => '2','3' => '3','4' => '4','5' => '5','6' => '6','7' => '7','8' => '8','9' => '9','10' => '10',

          '11' => '11','12' => '12','13' => '13','14' => '14','15' => '15','16' => '16','17' => '17','18' => '18','19' => '19','20' => '20',

          '21' => '21','22' => '22','23' => '23','24' => '24','25' => '25','26' => '26','27' => '27','28' => '28','29' => '29','30' => '30',

          '31' => '31','32' => '32','33' => '33','34' => '34','35' => '35','36' => '36','37' => '37','38' => '38','39' => '9','40' => '40',

          '41' => '41','42' => '42','43' => '43','44' => '44','45' => '45','46' => '46','47' => '47','48' => '48','49' => '49','50' => '50',

          '51' => '51','52' => '52']) ?>

        </div>  

        <div class="col-xs-12 col-sm-4 col-lg-4">

          <?= $form->field($model, 'show_grade')->dropDownList(['' => Yii::t('app', '--- Show Grade? ---'), '1' => 'Yes','0' => 'No']) ?>

        </div>  

      </div>

    </div>

  </div>  

</div>


    <div class="form-group col-xs-12 col-sm-6 col-lg-4 no-padding">

      <div class="col-xs-6">

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

      </div>

      <div class="col-xs-6">

        <?= Html::resetButton(Yii::t('app', 'Reset'),['class' => 'btn btn-default btn-block']) ?>

      </div>

    </div>


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

</div>




You could use Gii’s CRUD generator.

Select "ListView" instead of "GridView" for "Widget Used in Index Page".

Then you will get an index page that has a form for searching and a ListView. Customize the form as you like.

Thanks a lot