Global search box in grid view widget in Yii2

One feature that the users like, is the global search. With CRUD from the Gii module, the index.php comes with filters for each column in the grid view. The attribute calls filterModel. It is good and it is working perfectly. But it would be better if users can search for anything from one search box.

In this post, we will implement the global search box for the Currency index page. Below is my current index page.

In the global search box, we can set which fields will use in the search query. We don’t need the submit button. When the user types any text and hits enter, the result will show in the grid view.

CurrencySearch.php (models)

• For the CurrencySearch.php in the models’ folder, we will add a new $globalSearch variable

<?php

namespace frontend\models;

use Yii;
use yii\base\Model;
use yii\data\ActiveDataProvider;
use frontend\models\Currency;

/**
 * CurrencySearch represents the model behind the search form of `frontend\models\Currency`.
 */
class CurrencySearch extends Currency
{
    // global search field on index page
    public $globalSearch;
    ...

• Then we set the globalSearch variable to safe in the rules function

<?php

namespace frontend\models;

use Yii;
use yii\base\Model;
use yii\data\ActiveDataProvider;
use frontend\models\Currency;

/**
 * CurrencySearch represents the model behind the search form of `frontend\models\Currency`.
 */
class CurrencySearch extends Currency
{
    // global search field on index page
    public $globalSearch;

    /**
     * @inheritdoc
     */
    public function rules()
    {
        return [
            [['id', 'ma_user_id'], 'integer'],
            [['name', 'code', 'symbol', 'globalSearch'], 'safe'],
        ];
    }
    ...

• Next, add the search function which we will add the addFilterWhere() with globalSearch variable. In this step, we will use the search box value to perform the query.

For the part of the query, you can read more from here.

    /**
     * Creates data provider instance with search query applied
     *
     * @param array $params
     *
     * @return ActiveDataProvider
     */
    public function search($params)
    {
        $query = Currency::find()->where(['ma_user_id'=>Yii::$app->user->id]);

        // add conditions that should always apply below

        $dataProvider = new ActiveDataProvider([
            'query' => $query,
            'sort' => ['defaultOrder' => ['name' => SORT_ASC]] 
        ]);

        $this->load($params);

        if (!$this->validate()) {
            
            return $dataProvider;
        }

        // grid filtering conditions
        $query->andFilterWhere([
            'id' => $this->id,         
            'ma_user_id' => $this->ma_user_id,
        ]);
    
        // this conditions are the fields you want the users search in the serach box
        $query->andFilterWhere([
            'or',
            ['like', 'name' , $this->globalSearch],
            ['like', 'code' , $this->globalSearch],
            ['like', 'symbol', $this->globalSearch],
        ]);         

        return $dataProvider;
    }

currency/index.php (views)

• For the index.php in the currency views folder, we show the search box in the index.php. We will add the snippet below in the Pjax scope. So that the result will refresh via Ajax and the whole page won’t reload.

<?php echo $this->render('_search', ['model' => $searchModel]);?>

So in the currency index file, part of the code will look like this.

...
<div class="currency-index box box-default">  

    <?php Pjax::begin([
            'id' => 'pjax-container',
            'timeout' => '5000',
        ]); ?> 

        <div class="box-header with-border">
            <?= Html::a(Yii::t('frontend', 'Create New'), false, 
            [
                'class' => 'btn bg-olive btn-flat showModalButton', 
                'data-toggle' => 'modal',
                'data-target' => '#modal',
                'data-action' => 'create',
                'value' => Url::to(['create']),
                'title' => Yii::t('frontend','Create Currency'),
            ]) ?>
        </div>

        <div class="box-body table-responsive no-padding">
            <?php echo $this->render('_search', ['model' => $searchModel]);?>
...

currency/_search.php (views)

Here is the _search.php which is a search form that we add to the currency index page.

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model frontend\models\CurrencySearch */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="currency-search margin">

    <?php $form = ActiveForm::begin([
        'action' => ['index'],
        'method' => 'get',
        'options' => [ 
            'data-pjax' => 1 
        ], 
    ]); ?>
    
    <?= $form->field($model, 'globalSearch')->textInput(
        [
            'placeholder' => Yii::t('frontend', 'Search'), 
        ]
    )->label(false) ?>

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

</div>

That’s it. Now users can search from the search box. Hope the post saves your time. Feel free to support me by buying me some coffee. It will make my day!