Introduction ¶

In this tutorial i will explain how to use jui auto complete in yii2. The Autocomplete widget enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

Requirements ¶

To use jui auto complete widget first add

"yiisoft/yii2-jui": "^2.0"  

inside your composer.json file and then update composer (using the code

php composer.phar update

)

Usage ¶

consider a scenario where you have a table named family and it contains fileds id & name. In the form you want to have the names of different families to be autocompleted.

Now inside yii2 form

<?php

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


$data = Family::find()
        ->select(['name as value', 'name as  label','id as id'])
        ->asArray()
        ->all();

        echo 'Family Name' .'<br>';
	echo AutoComplete::widget([    
	'clientOptions' => [
	'source' => $data,
	'minLength'=>'3', 
	'autoFill'=>true,
	'select' => new JsExpression("function( event, ui ) {
			        $('#memberssearch-family_name_id').val(ui.item.id);//#memberssearch-family_name_id is the id of hiddenInput.
			     }")],
			     ]);
		    ?>