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...
Page 1 of 1
Creating A Searchbox That Query Mysql (Ajax-Jquery) I need help....
#2
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.
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.
Or, I'd like to submit the form with a delay.
There's no need to modify the action in the controller ... just do the same thing as in the actionAdmin method.
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.
Share this topic:
Page 1 of 1

Help











