How to add Jui Autocomplete in Yii2 GridView filter column

Hello all.

I am a beginner in Yii2 and trying to add jquery ui autocomplete widget in Yii2 GridView filter column, with this code in the grid view filter column…


'filter' => AutoComplete::widget([

'model' => $searchModel,

'attribute' => 'site_id',

'clientOptions' => [

    'minLength' => 3,

    'autoFill' => true,

    'source' => new JsExpression('

        function(request, response) {

            jQuery.getJSON("'.Url::to(['site/search']).'",

            {query: request.term}, function(data) {

                var suggestions = [];

                jQuery.each(data, function(index, ele) {

                    suggestions.push({

                        label: ele.name,

                        value: ele.id

                    });

                });

                response(suggestions);

            });

        }'),

    'select' => new JsExpression('

        function(event, ui) {

            jQuery("#'.Html::getInputId($searchModel, 'site_id').'")

                .val("ui.item.value");

            jQuery("#'.Html::.'").yiiGridView("applyFilter");

        }')

],

]),

This code works to filter GridView data by ‘site_id’ column.

Current GridView look like this photo:

7582

photo-1.png

What I want to show like this photo:

7583

photo-2.png

I want to show the ‘name’ field to the user in the jui autocomplete input element, and store the ‘site_id’ value in a hidden html input element to send with the GridView filter query. How to do this?

Update:

I added ‘. Html::hiddenInput(‘name’, ‘value’)’ and configured. It’s working fine. Thank you all.

More than 500 views, are they BOT ???

Hello, I’m also beginner with yii2, and I have same problem with you. Could you tell where I had to add

Html::hiddenInput(‘name’, ‘value’)’ and configured

thank you