Yii: Autocomplete field with CJuiAutoComplete

I have previously written a post on the same topic with CAutoComplete. Since CAutoComplete is deprecated (since V113) and replaced with CJuiAutoComplete, I should keep my notes up-to-dated.

I find that CJuiAutoComplete is easier to implement. The following is based on a this forum post.

View file or the form

<?php $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'model' => $model,
    'attribute' => 'name_of_attribute',
    'name' => 'name_of_field',
    'value' => 'default_display_value',
    'source' => CController::createUrl('/path/to/controller/autocomplete'),
    'options' => array(
        'minLength' => 2,
        'select' => "js:function(event, ui) {
            $('#<field_id>').val(ui.item.['<id>']);
            }",
        'change' => "js:function(event, ui) {
            if (!ui.item) {
                $('#<field_id>').val('');
            }
            }",
    ),
)) ?>

Notes:

  • line 4: do not use codes line 2-3 this field is for display a value. Ensure there’s a hidden field on the form to be saved to the database.
  • lines 9 – 15: Optional. For situation such as to display value on a field but save the id to database.
  • line 10: eg set hidden field with the actual data value to be saved to database, see next section regarding <id>
  • lines 12 – 15: Clear field value if data is empty

Autocomplete action

In controller file, add a new action:

function actionAutocomplete() {
    if (Yii::app()->request->isAjaxRequest && isset($_GET['term'])) {
        $models = Model::model()->getData($_GET['term']);
        $result = array();
        foreach ($models as $m)
            $result[] = array(
                'label' => $m->attribute_displayed_in_drop down_list,
                'value' => $m->attribute_for_input_field,
                'id' => $m->attribute_for_hidden_field_or_to_be_saved,
                'field' => $m->attribute_for_another_field,
            );
 
        echo CJSON::encode($result);
    }

Notes:

  • line 7: can be formatted string to be displayed on the drop down list.
  • line 8: value to be displayed in current input field
  • line 9-10: Optional. values to be set on another field on the same form. Referring to line 8 above. Can be accessed as array.

2 thoughts on “Yii: Autocomplete field with CJuiAutoComplete

  1. Jason Green Reply

    Great tutorial on using the Type-ahead functionality. For our open source application, Zurmo http://www.zurmo.org, we are using the autocomplete functionality quite a bit. We use it in the global search as well as for picking related models such as ‘owner’. If you are interested in seeing several different implementations of the autocomplete come check it out.

  2. Seb Reply

    createUrl is a static function of CController so it should be:
    “CController::createUrl(‘autocomplete’)…”

    ‘attritube’ => ‘name_of_attribute’, => attribute.

    I appreciate the effort, it would have been even nicer if you had posted working code. Sorry for being a little bitch.

Leave a Reply

Your email address will not be published. Required fields are marked *