CAutoComplete inside CActiveForm?

Can anyone provide a quick example of how to get an AutoComplete to replace a listBox in an ActiveForm?

Preferably with the ability to either select a previous value or create a new value for the field.

I want to replace the listBox at the bottom of this form. Can anyone help? :)

My View for the form:




<?php

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

    'id' => 'document-form',

    'enableAjaxValidation' => true,

    'enableClientValidation' => true,

    'htmlOptions' => array('enctype' => 'multipart/form-data'),

    'focus' => array($model, 'name')

        ));

?>


<?= $form->errorSummary($model) ?>

<div class="row">

    <?= $form->labelEx($model, 'name') ?>

    <?= $form->textField($model, 'name') ?>

    <?= $form->error($model, 'name') ?>

</div>

<div class="row">

    <?= $form->labelEx($model, 'description') ?>

    <?= $form->textField($model, 'description') ?>

    <?= $form->error($model, 'description') ?>

</div>

<div class="row">

    <?= $form->labelEx($model, 'content') ?>

    <?= $form->fileField($model, 'content') ?>

    <?= $form->error($model, 'content') ?>

</div>

<div class="row">

    <?= $form->labelEx($model, 'page') ?>

    <?=

    $form->listBox($model, 'page', array(

        'overview' => 'Overview',

        'Assess' => 'assess',

        'Intro &amp; Close' => 'intro',

        'Client Setup' => 'setup'

    ));

    ?>

</div>

<div class="row submit">

    <?php echo CHtml::submitButton('Upload'); ?>

</div>

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