Style items of CJuiWidget

is there a way to style the items of the CJuiWidget so the user will see something like Amsterdam (12)?

output from the JSON call: {"1":"Amsterdam","2":"Den Haag"}

    public function actionCompleteCity() {

            $criteria = new CDbCriteria;

            $criteria->select = array('id_city', 'city');

            $criteria->addSearchCondition('city', $_GET['term']);

            $criteria->limit = 15;

            $data = City::model()->findAll($criteria);

            echo CJSON::encode(CHtml::listData($data, 'id_city', 'city')); //{"1":"Amsterdam","2":"Den Haag"}


        $this->widget('zii.widgets.jui.CJuiAutoComplete', array(

            'name' => 'city',

            'sourceUrl' => array('city/completecity'),

            // additional javascript options for the autocomplete plugin

            'options' => array(

                'showAnim' => 'fold',


            'htmlOptions' => array(

                //'style' => 'height:20px;'


        )); ?>

What do you mean ‘style’? What is the number 12?

You can transform your $data like this and pass it through ajax, the label keyed array item will show in the list.

$arr = array();

foreach($data as $item) {

    $arr[] = array(

        'label'=>label,  // label for dropdown list          

        'value'=>value,  // value for input field          

        'id'=>id,        // return value from autocomplete



echo CJSON::encode($arr);

That’s what I needed. Next question… How to store the id in a hidden field?

More than perfect :).

Final question is how to fill the CJuiAutocomplete text field with the data that is posted after a submit that fails because of the validation?

Don’t know, you have to w8 for somebody smarter. :confused: