categorized autocomplete

Hi there!

I try to build a categorized autocomplete like the one in the jquery ui demos:

Jquery’s autocomplete demo

How can i achieve this in yii? Because It’s a very handy feature.

I already added a ‘category’ label to my json feed. I only need to change the cjuiautocomplete widget?

Would be great if you guys could help me out.

thanks a lot!

Will need more detail on what you are trying to achieve. However from a widget perspective something like this in your view should get you started.

<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(



)); ?>

	<p class="note">Fields with <span class="required">*</span> are required.</p>

	<?php echo $form->errorSummary($model); ?>

	<div class="row">

		<?php echo $form->labelEx($model,'name'); ?>


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







			// additional javascript options for the autocomplete plugin





				 'select'=>"js:function(event, ui) {










		<?php echo $form->hiddenField($model,'name'); ?>

		<?php echo $form->error($model,'name'); ?>


	<div class="row">

		<?php echo $form->labelEx($model,'email'); ?>

		<?php echo $form->textField($model,'email',array('size'=>60,'maxlength'=>64)); ?>

		<?php echo $form->error($model,'email'); ?>


<?php $this->endWidget(); ?>

</div><!-- form -->

You can also use code like this as the action specified in ajax/userlist (specified above).

public function actionUserList($term)



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


			$res = array();

			$criteria=New CDbCriteria ; 

			$criteria->with  = array('user');

			$criteria->addSearchCondition('user.forenames', $term , true, 'OR');

			$criteria->addSearchCondition('user.surname', $term , true, 'OR');

			$list = User::model()->findAll($criteria);



			foreach($list as $user)


				$res[]= array('value'=>sprintf('%s %s' , $user->person->forenames , $user->person->surname) , 

					      'id'=>intval($user->id) , 






			echo CJSON::encode( $res);






Hope that helps! :D

Thanks for your quick reply.

The autocomplete already works here. JSON feed too.

What i want is:

a search field where you a user can input (destination/hotel name).

the destination fields should be categorized under Destination, hotels under Hotel.

Exactly like how it works on the jquery example.

I know I should add this code somewhere and modify it, the question is how so it works in yii?

But i tried everything (register this piece of code,…), but never worked…

$.widget( "custom.catcomplete", $.ui.autocomplete, {

		_renderMenu: function( ul, items ) {

			var self = this,

				currentCategory = "";

			$.each( items, function( index, item ) {

				if ( item.category != currentCategory ) {

					ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );

					currentCategory = item.category;


				self._renderItem( ul, item );




Hello! I have the same problem, I can not set the format of the item

This is my code, but it does not work

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



                'source' =>CHtml::normalizeUrl('books/autocomplete'),

		'theme' => 'swanky-purse',



			'showAnim' => 'fold',	

			'formatItem' => 'js: function(ul, items){

				var self = this,

				currentCategory = "";

				$.each( items, function(index, item){

					if(item.category != currentCategory){

						ul.append( "<li class=\'ui-autocomplete-category\'>" + item.category + "</li>" );

						currentCategory = item.category;


						  self._renderItem( ul, item );



                    'select' =>'js: function(event, ui) {

			this.value = ui.item.value;


                        return false;



                'htmlOptions' => array(




Can you please tell where is the mistake?

bumping also mines works except can’t format display with jquery’s example and yii’s code.