Ajax update with autocomplete howto

Hi! I'm testing yii and make some test.

In my test i've 3 ajaxLinks that update a div. When i update it with an autocomplete widget, i didn't include the scripts needed. How do i do that?

Something like using scripts to import them to the page.



You mean something like ?


mmm, yes and no.

I know that i can do that, but i think that maybe sometime you could update your script and it's better if we have a CAutocomplete, there must be a way to import the script from CAutocomplete. Something like CAutocomplete::ensureScriptImport() or something like that.

It's just an idea.

I found another way:

In my layout file (or in any controller instance file)




but Css file registration still needs that i know where it is.

I think it's better a way to register the css from a function at the widget like


What do you think?

The CAutocomplete does register its script internally -

(Any widget should do the same)

If you are adding the autocomplete using an ajax update you need to set the last parameter of render partial to true.


So i can’t make it work. :(

I tried:

    public function actionAutocompleteUsername(){

        return $this->renderPartial("autocomplete",null, false, true);


and also

    public function actionAutocompleteUsername(){

        return $this->renderPartial("autocomplete",null, true);


My index.php view is:

<?php echo CHtml::ajaxLink ("Ayuda" , $this->createUrl("autocomplete/AutocompleteUsername"), 


<div class="mainBody">


Then, the autocomplete.php view is:

<?php echo CHtml::form();?>

<?php $this->widget('CAutoComplete',array('name'=>'username',








					); ?>

<?php echo CHtml::ajaxSubmitButton("Buscar", array('showData'), array('update'=>".user_data")); ?>


<div class="user_data">



The ajaxbutton didn't work neither.

Any ideas?

Just fixed this issue. Thanks.

The autocomplete works now, but the AjaxButton is not submiting anything.

The ajaxButton by itself will not, unless you use the ajaxSubmitButton (or add the type="post" to the ajax options.

I just checked in a fix. This is due to the duplication of automatically generated button id.

Something is still wrong.

If i do this:

<?php echo CHtml::form();?>

<?php $this->widget('CAutoComplete',array('name'=>'username',








					); ?>

<?php echo CHtml::ajaxSubmitButton("Buscar2",$this->createUrl("autocomplete/showData"), 


										array('id'=>'boton2')); ?>

<?php echo CHtml::ajaxSubmitButton("Buscar1",$this->createUrl("autocomplete/showData2"),

										array('update'=>".user_data")); ?>


<div class="user_data">




only works diferent when i pass the id attribute in htmlOptions array.

so, in some place the documentation must say that the id must be passed...

or make it work that is better :D  :P

Did you use my latest check-in? It already generates an id if it is not present.

yes, I have the last update.

It generates the same id for the 2 buttons like this:

<link rel="stylesheet" type="text/css" href="/pruebaYii/assets/ffaee85e/autocomplete/jquery.autocomplete


<script type="text/javascript" src="/pruebaYii/assets/ffaee85e/jquery.js"></script>

<script type="text/javascript" src="/pruebaYii/assets/ffaee85e/jquery.bgiframe.js"></script>

<script type="text/javascript" src="/pruebaYii/assets/ffaee85e/jquery.dimensions.js"></script>

<script type="text/javascript" src="/pruebaYii/assets/ffaee85e/jquery.ajaxqueue.js"></script>

<script type="text/javascript" src="/pruebaYii/assets/ffaee85e/jquery.autocomplete.js"></script>

<form action="/pruebaYii/index.php?r=autocomplete/autocompleteUsername&amp;_=1226239083783" method="post"

><input id="username" type="text" value="" name="username"/><input name="button" type="button" value

="Buscar2" id="button"/><input name="button" type="button" value="Buscar1" id="button"/></form>

<div class="user_data">


</div><script type="text/javascript">






(".user_data").html(html)}});return false;});



there is 2 buttons with id="button" attribute.

I see. Just checked in a fix. However, perhaps in your case you will need to explicitly specify the button 'name' (and/or 'id') to avoid id conflict.

Not sure if already solved but I don't like the renderPartial with the last param true.

So, I've made an extension to load it under the base page (the page from where I'll open the ajax dialog box)

The widget call is:


and is:

class Autocomplete extends CAutoComplete


	public function init()





	public function registerClientScript()