CJuiAutoComplete with images

Yii 1.1 General Discussion
1

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(

	'name'=>'search-main',

	'sourceUrl'=>$this->createUrl('site/autocomplete'),

	// additional javascript options for the autocomplete plugin

	'options'=>array(

		'minLength'=>'2',

		'delay'=>'200',

	),

	'htmlOptions'=>array(

		'style'=>'height:30px;'

	),

));

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);

	Yii::app()->end();

}

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

2

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()

{

    Yii::app()->clientScript->registerCoreScript('jquery.ui');

    Yii::app()->clientScript->registerScriptFile('/js/jquery.ui.autocomplete.html.js');

    ...

}

In the view, call:


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

     'name'=>'data',

     'source'=>$this->createUrl('data/juiList'),

     'options'=>array(

          'html'=>true,

          '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(

                'name'=>$model->data,

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

                'id'=>$model->id,

            );

        }

    }

    echo CJSON::encode($arr);

    Yii::app()->end();

}

Edit:

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

Edit2:

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

3

hi

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

can anyone help?

i need it

thanks

4

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