yii: autocomplete field with CJuiAutoComplete
by prettyscripts on 2012-01-20 14:17:00
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:
<?php $this->widget('zii.widgets.jui.CJuiAutoComplete', array( | |
'model' => $model, | |
'attritube' => 'name_of_attribute', | |
'name' => 'name_of_field', | |
'value' => 'default_display_value', | |
'source' => 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:
PHP:
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. refering to line 8 above. can be accessed as array.
Tags: ajax, autocomplete, jquery, php, yii
1 comment
Comment by Jason Green @ 2012-02-08 01:30:25
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.
Comment feed for this postLeave a comment
Affiliates
©2012 by prettyscripts.• powered by b2evolution • skin by prettyscripts