Pawan Pawan - 1 year ago 297
Javascript Question

Yii2: Jui Auto Complete Widget how to?

I am trying to use yii2 Jui autocomplete widget.

I have this code which is showing the auto-complete date correctly, but I am not able to save the data.

$data=ArrayHelper::map(State::find()->all(), 'id', 'state_name' );

And then

echo 'State' .'<br>';
echo AutoComplete::widget([
'attribute' => 'state_id',
'clientOptions' => [
'source' => $data,

Any solution will be greatly appreciated.

Answer Source

Ok I found the solution, it goes like this:

use yii\jui\AutoComplete;
use yii\web\JsExpression;


$data = State::find()
    ->select(['state_name as value', 'state_name as  label','id as id'])


echo 'State' .'<br>';
  echo AutoComplete::widget([
    'name' => 'State',    
    'id' => 'ddd',
    'clientOptions' => [
        'source' => $data, 
         'select' => new JsExpression("function( event, ui ) {
        $('#city-state_name').val(;//#City-state_name is the id of hiddenInput.

and Finally:

<?= Html::activeHiddenInput($model, 'state_name')?>

That is all. Hope some one will find it useful. Thanks.