CJuiAutoComplete with images

How can one implement a jQuery autocomplete (autosuggest) text input with images on the side of the text?

I have the basic autocomplete working.

In the view:

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



	// additional javascript options for the autocomplete plugin









In the controller:

public function actionAutoComplete() {

	$res = array();

	if (isset($_GET['term'])) {

		$qtxt = "SELECT businessName FROM business WHERE businessName LIKE :businessName LIMIT 5";

		$command = Yii::app()->db->createCommand($qtxt);

		$command->bindValue(":businessName", '%'.$_GET['term'].'%', PDO::PARAM_STR);

		$res = $command->queryColumn();



	echo CJSON::encode($res);



I’m new to yii. Any help is appreciated!

I am new myself, both to yii and to jQuery, but here’s a solution that I found which you could adapt:

Download the jQuery UI autocomplete html extension from jQuery UI extensions.

Make a folder beside ‘images’ and ‘css’ called ‘js’.

Copy ‘autocomplete/jquery.ui.autocomplete.html.js’ from the download above to the ‘js’ folder.

In the controller action, add:

public function actionIndex()






In the view, call:

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





          'select'=>'js: function(event,ui){$("#data").val(ui.item.name);return false;}',



Finally, back in the controller, add:

public function actionJuiList()


    $arr = array();

    if (isset($_GET['term']))


        $criteria = new CDbCriteria();

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

        $models = Data::model()->findAll($criteria);

        foreach ($models as $model)


            $arr[] = array(


                'label'=>CHtml::image('path/to/image').' '.$model->data,





    echo CJSON::encode($arr);




Added javascript function to not show html text when an item was selected.


Added ‘name’ field to juiList. Sorry to have left that off.


i used this topic but instead of image it return image tag for me like <img src="somewhere" />

can anyone help?

i need it


I don’t know how to do it with autocomplete but you can use select2 which has autocomplete and can display images.

Select2 Image example in dropdown

Select2 Yii Ext