Need AJAX solution for: CGridView and textField

I have CGridView which is working well.

Now, I need search feature for model represented in CGridView. My wish is to use one textField where user will type some text. While user is typing (event onKeyUp) the value in textField must be sent to controller via Ajax to some SQL query (jquery) and response will be shown in CGridView. The SQL query must search to all columns (fields) of model table.

Any idea HOW TO use AJAX for this situation? Do I need CActiveForm? What I must write in controller and model?

Ok. Here is my code in view.


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

	'id'=>'customsearch-form',

	'enableAjaxValidation'=>true,

	'clientOptions'=>array('validateOnSubmit'=>true, 'validateOnChange'=>true),

	'htmlOptions'=>array('enctype' => 'text/plain'),

)); 


echo CHtml::textField('TextSearch', 'Search',

 		array('id'=>'tbSearchKeyword', 

       		'width'=>100, 

       		'maxlength'=>100,

 ));

$this->endWidget();

?>


<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'requests-grid1',

	'dataProvider'=>$dataProvider,

	//'filter'=>$model,

	'columns'=>array(

		'REQ_ID',

		'USER_Name', 

		'REQ_RequestDate', 

		'REQ_DescriptionText',

		'REQ_Beneficiary',

		'REQ_Due',

		//'REQ_CurrencySymbol',

		array(

			'name' => 'REQ_CurrencySymbol',

			'header' => 'Curr.'

		),


		//'REQ_Amount',

		array(

			'name' => 'REQ_Amount',

			'htmlOptions'=>array('style'=>'text-align:right'),

		),

		'REQ_Status',

		

		array(

			'class'=>'CButtonColumn',

		),

	),

)); ?>

I think it’s easier for you to start with an “admin” page of Gii-generated CRUD codes. The “admin” page already has an ajax search function to update the grid in the folded “detailed search box”.

Although it has not a general purpose search key word field, it will be a good starting point for your needs.

So what you would want to do might be :

[list1]

[*] Bring out the search box from the folded div in the view.

[*] Remove unnecessary fields.

[*] Add a new attribute for the general search key word to the model.

[*] Modify the validation rules of the model for the new attribute.

[*] Modify the search() method of the model for the new attribute.

[*] Add a general purpose search key word field to the search form using the newly added attribute.

[*] Make sure the key word search does work.

[*] Modify the search form to submit the ajax request on key up in the field.

[/list]

The key points are 3 to 5.

Good luck. :)