Yii Framework Forum: Creating A Searchbox That Query Mysql (Ajax-Jquery) - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Creating A Searchbox That Query Mysql (Ajax-Jquery) I need help.... Rate Topic: -----

#1 User is offline   eggshOt 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 18-September 12
  • Location:Philippines

Posted 18 September 2012 - 04:08 AM

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...
0

#2 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 2,041
  • Joined: 16-February 11
  • Location:Japan

Posted 18 September 2012 - 05:37 AM

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.

2) 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.

3) 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.

4) 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){
		clearTimeout(timer);
		timer = setTimeout(callback, ms);
	};
})();
$('.search-form form').on('keyup', ':text', function(event){
	delay(function(){
		$('.search-form form').submit();
	}, 500);
	event.preventDefault();
});
");


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

#3 User is offline   eggshOt 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 18-September 12
  • Location:Philippines

Posted 18 September 2012 - 09:14 AM

Thanks for your help..
0

#4 User is offline   fouss 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 385
  • Joined: 05-October 10
  • Location:Bamako Mali

Posted 07 February 2013 - 02:50 AM

cool stuff.. it worth (+1)
Posted Image
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users