Creating A Searchbox That Query Mysql (Ajax-Jquery)

I want a searchbox that can perform onkeyup() query thru my database…processed thru AJAX-Jquery and display dynamically the results in a div(looks like in google)

… I want this specifically on my index.php (created when I used Model and CRUD generator in Gii)

Im still new in this framework and I still dont fully understand "Controllers", etc…but Im struggling for it now.

Your help is greatly appreciated…

Hi eggshoOt, welcome to the forum.

I recommend you to start with gii-generated "admin" page.

  1. Replace the CGridView with a CListView in the view script.

Then the page will look like "index" page.

  1. Use "advanced search" form for your search box.

It is originally enclosed in a div which is initially hidden from the user.

You can modify the html to bring it out.

  1. Change the javascript that has been updating the grid with ajax call.

Yii::app()->clientScript->registerScript('search', "

$('.search-form form').submit(function(){

	// $.fn.yiiGridView.update('your-grid', {

	$.fn.yiiListView.update('your-list', {

		data: $(this).serialize()


	return false;



This part of the script will now update the CListView via ajax when you submit the search form.

  1. Attach an event handler for keyup event in the text fields of the form to submit the form.

Yii::app()->clientScript->registerScript('search', "


$('.search-form form :text').keyup(function(){

	$('.search-form form').submit();

	return false;



Or, I’d like to submit the form with a delay.

var delay = (function(){

	var timer = 0;

	return function(callback, ms){


		timer = setTimeout(callback, ms);



$('.search-form form').on('keyup', ':text', function(event){


		$('.search-form form').submit();

	}, 500);




There’s no need to modify the action in the controller … just do the same thing as in the actionAdmin method.

Thanks for your help…

cool stuff… it worth (+1)