Dynamically created CJuiAutoComplete in Yii not working

Question

I have used jQuery's autocomplete plugin in the past, but never before through Yii's implementation of it as a widget.

I am dynamically creating another autocomplete field and not able to set it to live:

$('input.ui-autocomplete-input').live("keydown.autocomplete", function() {
    $(this).autocomplete();
});

or simply calling .autocomplete() when it is created to get it to work. Any ideas why this would work differently through Yii than through just using the plugin itself, or am I missing something really simple?

Thanks for any help!

Answer 1

My solution was overly simple.

Each autocomplete field must have a unique name attribute. I was using

    <input name="family[]"/>
    <input name="family[]"/>
    <input name="family[]"/>

Fixed by changing it to:

    <input name="family_0"/>
    <input name="family_1"/>
    <input name="family_2"/>

Just a little embarrassing, but worth posting in case anyone else ever overlooks such a simple issue.

Note: the code above isn't exact, the point is to make sure you are using unique names for each of the fields that are using jQueryUI's autocomplete.

Answer 2

CJuiAutoComplete relies on jQuery UI's autocomplete so please be sure that jQuery UI is registered for the view you create a field dynamically in:

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

Also be sure that source parameter with your autocomplete tags is provided for autocomplete() call. The following works fine for me:

<?php
$source = array(
    "hello",
    "test"
);
?>
<div id="wrapper">
</div>
<?php
Yii::app()->clientScript->registerScript("autocomplete", "
    $('<input />')
        .addClass('ui-autocomplete-input')
        .appendTo($('#wrapper'));
    $('input.ui-autocomplete-input').autocomplete({
        'source': " . CJavaScript::encode($source) . "
    });
", CClientScript::POS_READY);