Difference between #3 and #5 of
How to display images in CJuiAutoComplete without extenstions


Title unchanged

How to display images in CJuiAutoComplete without extenstions

Category unchanged


Yii version changed


Tags changed

AJAX,jquery,CJuiAutoComplete, ajax, jquery

Content changed

I wanted to customize the CJuiAutoComplete, so that it displays a thumb image before the label like the one shown in the following image: ![autocomplete thumb](http://media-cache-ec0.pinimg.com/736x/e5/63/16/e563163b9de20b24c1d1a49306f0089d.jpg "Autocomplete with thumb Example ") For me I needed to display a color thumb "color_img" before the color name "color_desc_e". Here is what you can do:
Here is what you can do in a very simple way, in your model controller:  

// In the access rules function
public function accessRules()
$return_array = array();
foreach($data as $sub) {
       // Set all of your view variables in this array $return_array[] = array(         // This is the color name 'label'=>$sub['color_desc_e'], 'value'=>$sub['color_id'], 'id'=>$sub['color_id'],         // This is the line containing the full path to the thumb image
'img' => Yii::app()->request->baseUrl.Yii::app()->params["colorUploadUrl"].$sub['color_img']

In your view
file _In my case it was _form_:

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

Check the comments in
linside the code, that's it !
[Your text to link here...](http://qadrio.wordpress.com/2012/02/09/how-to-customize-appearance-of-cjuiautocomplete-in-yii/ "How to customize appearance of CJuiAutoComplete in Yii")
[Your text to link here...](http://www.yiiframework.com/wiki/217/custom-autocomplete-display-and-value-submission "http://www.yiiframework.com/wiki/217/custom-autocomplete-display-and-value-submission")
0 0
Viewed: 10 002 times
Version: 1.1
Category: Tutorials
Written by: Asmaa
Last updated by: samdark
Created on: Oct 9, 2014
Last updated: 2 years ago
Update Article


View all history