Cjuiautocomplete on a CActiveForm in a Create method in yii - php

Question

Brief explanation of what I'm trying to do. I am trying to implement an autocomplete in a create form. I know this seems strange but the table that is being added to is a list of "out of office" people. So my autocomplete looks up user names on the user table, my actionCreate, can use the Last, First to look up the user id and add them to the table. This all works fine. I can see the autocomplete. The issue is this:
When I type in a partial name the list of names pops up but i cannot select from them. Whenever I mouse over the drop down the list disapears, the same thing happens when I press "down".
Here is the code for the form. I have tried multiple different ways of implementing an autocomplete and so far this one works the best I am just unable to get the autocomplete to fill the field.
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'away-mentor-form',
'enableAjaxValidation'=>true,
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo "Last-Name, First-Name"; ?><br/>
<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>'name_search',
'value'=>$model->name_search,
'source'=>Yii::app()->createUrl('/AwayMentor/FindUserName'),// <- path to controller which returns dynamic data
// additional javascript options for the autocomplete plugin
'options'=>array(
'minLength'=>'1', // min chars to start search
'select'=>'js:function(event, ui) { console.log(ui.item.id +":"+ui.item.value); }'
),
'htmlOptions'=>array(
'id'=>'name_search',
'rel'=>'val',
),
));
echo $form->error($model,'name_search'); ?>
</div>
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
</div>
<?php $this->endWidget(); ?>

Answer 1

Try Something Like: -
<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name' => 'name_search',
'value' => $model->name_search,
'source' => Yii::app()->createUrl('/AwayMentor/FindUserName'), // <- path to controller which returns dynamic data
// additional javascript options for the autocomplete plugin
'options' => array(
'minLength' => '1', // min chars to start search
'select' => "js: function(event, data) {
$('#name_search').val(data.item.value);
$(this).data('id',data.item.id);
return false;
}",
'focus' => "js: function(event,data){
$(this).val(data.item.value);
return false;
}"
),
'htmlOptions' => array(
'id' => 'name_search',
'rel' => 'val',
),
));
echo $form->error($model, 'name_search');
Yii::app()->clientScript->registerScript('autocomplete', "
jQuery('#name_search').data('autocomplete')._renderItem = function( ul, item ) {
return $('<li></li>')
.data('item.autocomplete', item)
.append('<a>' + item.value + '<br><i>' + item.id + '</i></a>')
.appendTo(ul);
};",
CClientScript::POS_READY
);
?>