Dear Friend
As Rajith and Luc suggested, things can be easily done with CJuiAutoComplete.
Following is my attempt to acheive what you intend.
I have a field with attribute name.
Autocomplete is going to fetch data from model Person.
one.php displaying form and registering necessary scripts.
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'person-form',
'enableAjaxValidation'=>false,
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'name'); ?>
<?php echo $form->textField($model,'name',array('size'=>36,'maxlength'=>64,'id'=>"autoField")); ?>
<!--Updating the data in div with id test. making some style to match the input field -->
<div id="test" style="width:316px;background:ghostWhite;display:none;margin-top:-8px;border-radius:10px;padding:10px;box-shadow:black 1px 1px 1px"></div>
<?php echo $form->error($model,'name'); ?>
</div>
<div class="row buttons">
<?php echo CHtml::submitButton('Save'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
<?php
Yii::app()->clientScript->registerScript('autoComplete','
$("#autoField").on("input",function(){
var value=$(this).val();
if(value.length>1)
{
$.ajax({
type:"POST",
url:"'.CHtml::normalizeUrl(array("trial/two")).'" ,
data:{autoField:value},
success:function(data){$("#test").html(data).show();}
});
}
});
$("body").on("click","#test span",function(){
$("#autoField").val($(this).html());
$("#test").hide();
});
');
Sofar we have made a div with id test, and made it hidden.
We are using the event input in script to perceive the changes as user types inside the text field.
That event is triggered after atleast 2 charectors are put inside the textfield.
We are posting the input field value as autoField.
When data is fetched from AJAX request,test div is filled with date and display changed to block.
When user clicks on elements in test div, the value clicked will fillup the autocomplete fieldand then test div disappears.
TrialController.php
class TrialController extends Controller
{
//Action one is to display the form
public function actionOne()
{
$model=new Person;
if(isset($_POST['Person']))
{
$model->attributes=$_POST["Person"];
echo $model->name;
//Do something with $model
}
$this->render('one',array('model'=>$model));
}
//action two is to attend the ajax call.
public function actionTwo()
{
if(Yii::app()->request->getIsAjaxRequest() && isset($_POST["autoField"]))
{
$criteria=new CDbCriteria;
$criteria->compare("name",$_POST["autoField"],true);
$models=Person::model()->findAll($criteria);
foreach($models as $model)
{
echo "<span style=\"font-size:18px;padding:5px;cursor:pointer;\">".$model->name."</span>";
echo "</br>";
}
}
}
}
Functionality is acheived ,but I really struggled to adjoin the update container with form field.
I have not used the hidden field.
I hope I have helped a bit.
The following is the screenshot from my localhost.
3699
. how to get the value into my textfield…this statement showing Hello world in success response $("