Autocomplete new

Select single
Country:
View code
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    //'model'=>$model,
    //'attribute'=>'name',
    'id'=>'country-single',
    'name'=>'country_single',
    'source'=>$this->createUrl('request/suggestCountry'),
    'htmlOptions'=>array(
        'size'=>'40'
    ),
));

Select multiple
Country:
View code
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    //'model'=>$model,
    //'attribute'=>'name',
    'id'=>'country-multiple',
    'name'=>'country_multiple',
    'source'=>"js:function(request, response) {
        $.getJSON('".$this->createUrl('request/suggestCountry')."', {
            term: extractLast(request.term)
        }, response);
    }",
    'options'=>array(
        'delay'=>300,
        'minLength'=>2,
        'showAnim'=>'fold',
        'select'=>"js:function(event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push('');
            this.value = terms.join(', ');
            return false;
        }"
    ),
    'htmlOptions'=>array(
        'size'=>'40'
    ),
));

Select in chain
Country:


These fields will be filled automatically after you select country.



View code
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    //'model'=>$model,
    //'attribute'=>'name',
    'id'=>'country-chain',
    'name'=>'country_chain',
    'source'=>$this->createUrl('request/suggestCountry'),
    'options'=>array(
        'delay'=>300,
        'minLength'=>2,
        'showAnim'=>'fold',
        'select'=>"js:function(event, ui) {
            $('#label').val(ui.item.label);
            $('#code').val(ui.item.code);
            $('#call_code').val(ui.item.call_code);
        }"
    ),
    'htmlOptions'=>array(
        'size'=>'40'
    ),
));

Read more

http://jqueryui.com/demos/autocomplete/