CAutoComplete and new jquery-ui AutoComplete layout

Hi to everyone.

Someone know if Yii CAutoComplete widget support the new jQuery-UI AutoComplete layout

I’m talking about this example:

Thank you very much for help :)


Samdark link has one dot at the end and that’s why the link gives error 404


I need to configure it like CAutoComplete in the coockbook example:

I need to display in the CJuiAutoComplete the String ( example username ) and in an hidden field ( active field of the model ) an ID ( for example the ID of the user ).

How can I do that? Sorry but I don’t see a methodChain like in

up :)

StErMi, you are right, there is no methodChain, so you can set Select for display a different value, but you can’t set _renderItem for display the item as you wish.

Not long ago I solved by writing by myself the CAutoComplete, I can advice you to do the same. You can also write a post in feature request, usually staff is answering and maybe they will implement!

Can you provide your modification?

Is’t possible to do it with the official JiuAutoComplete?

an example of my code is:

<?php echo FHtml::textField(


	Yii::t('crud','type something'), 






					'source': '".Yii::app()->baseUrl."/conto/search',// the action that provides data


					'select':function(event, ui){selectItem(event, ui.item, $(this))}


			).data( 'autocomplete' )._renderItem = function( ul, item ) {

				return $( '<li></li>' ).data( 'item.autocomplete', item ).append( '<a><span class=\'button create\'>' + item.label +'</span></a>' ).appendTo( ul );





The action /conto/search is supposed to return a CJson::encode() of an array with the data I need.

The option select is a function called when you select an item, in CAutocomplete was needed methodChain for this.

The _renderItem is the function for edit the list of items, in my example I add a button for add a new item. This need sotething like methodChain, that in CJuiAutocomplete there isn’t, and so I write the code of autocomplete.

Omg, dude, thanks a lot for this tip. You gave me an idea how to alter behavior of autocomplete on an object-basis.

I’ve done it on the class-basis like this:

$.ui.autocomplete.prototype._renderItem = ....

and it was working for one autocomplete on the page. Of course this way wasn’t working when I was trying to set two different autocompleters with different layouts on the same page. So your tip saved a lot of time for me. Thanks!

This might be helpfull



		var default_render=$.ui.autocomplete.prototype._renderItem;		

	    $.ui.autocomplete.prototype._renderItem = function(ul, item ) {	         


		        return default_render(ul,item);


		       return renderSearchlinks(ul,item)




		function renderSearchlinks(ul,item){

		   do sth special