Yii 2.0: Simple Jui Autocomplete in yii2

3 followers

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.
                 }")],
                 ]);
            ?>

Total 4 comments

#20083 report it
LucasK at 2017/06/04 03:28pm
works

Thx, worked

$data = \common\models\User::find()
    ->select(['username as value', 'username as  label', 'id as id'])
    ->asArray()
    ->all();
 
    <?php $form = ActiveForm::begin(); ?>
    <?= AutoComplete::widget([
        'name' => 'Company',
        'id' => 'ddd',
        'value' => $model->user->username,
        'clientOptions' => [
            'source' => $data,
            'autoFill' => true,
            'minLength' => '1',
            'select' => new JsExpression("function( event, ui ) {
    $('#inoculation-id_user').val(ui.item.id);
    }")],
        'options' => [
            'class' => 'form-control'
        ]
    ]);
    ?>
    <?= Html::activeHiddenInput($model, 'id_user') ?>
 
    <?php ActiveForm::end(); ?>
#19729 report it
Commun at 2016/01/05 12:44am
I don't understand

I read from this documentation but couldn't find anough information to understand how the widget works; Can you help me understand those properties:

  1. Why selecting three column and what are the use : ->select(['name as value', 'name as label','id as id'])
  2. How does the widget use : 'select' => new JsExpression("function( event, ui ) { $('#memberssearch-family_name_id').val(ui.item.id);//#memberssearch-family_name_id is the id of hiddenInput. }")
  3. how does the widget use : <?= Html::activeHiddenInput($model, 'family_name_id')?>

Thanks

#19720 report it
YiiJeka at 2015/12/29 12:41am
:(

Your tutorial is bad for now.

  • count($data) <= 20 by default
  • SQL in View?
  • $('#memberssearch-family_name_id') can be calculate from $model->formName

...

#19659 report it
ajith at 2015/11/12 07:02am
Forgot something

also add the field where you want the autocomplete value to appear

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

id of this field is what we use inside the jsExpression

Leave a comment

Please to leave your comment.

Write new article
  • Written by: ajith
  • Category: Tutorials
  • Yii Version: 2.0
  • Votes: -2
  • Viewed: 20,216 times
  • Created on: Nov 12, 2015
  • Last updated: never
  • Tags: yii2, autocomplete