Simple Jui Autocomplete in yii2

You are viewing revision #1 of this wiki article.
This is the latest version of this article.


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.


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



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


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

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

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