Ajax Filter products using php mysql with jquery

Ajax Filter products using php mysql with jquery

In this Post We Will Explain About is Ajax Filter products using php mysql with jquery With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to filter products using php mysql and jquery Example

In this post we will show you Best way to implement Server Side Filtering using jQuery Ajax PHP and MySQL, hear for Product Brand,Size,Material Checkbox Search Filtering Using PHP with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Live Filter Data With Checkbox Using Jquery With AJAX

In this post We are Learning live data filter with jquery using sales eCommerce main concept. How to filter products with Items with their company IMP product_brand with All the attributes. Find Data results with call jquery and ajax Based search results.

So,First of all We have make html View form with simple multiple type of the checkbox option List to filter display Data results. jquery ajax Live filter Data results Search dynamic here based on checked checkbox key with value(Product all the attribute) both are same as well as match with the particular product inserted in the mysql database with All the product attributes .If the check condition successfully match After that the findresult(user get product name) here display.

Using simple Javascript on checkbox onchange event simple jquery ajax sending the data value of checkbox checked to get more live Data my_live_results. The checkbox checked value is ajax server side sending to another Data page in serialized HTML form to filter this specific my_live_results.
So here, There are two types of the files and a include jquery CDN which is used for Data results live filter and We are gonna to Step By step in Information for Live Filter Data With Checkbox Using Jquery With AJAX.

Also Read :   AngularJS Custom Digital Clock in Controller

It some Files which are used to here:
Index.php
Filter.php

DB Table structure

CREATE TABLE IF NOT EXISTS `product` (
  `id` int(25) NOT NULL AUTO_INCREMENT,
  `name` varchar(250) NOT NULL,
  `products` varchar(250) NOT NULL,
  `product_brand` varchar(250) NOT NULL,
  `product_price` varchar(250) NOT NULL,
  `product_color` varchar(250) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=55 ;

INSERT INTO `product` (`id`, `name`, `products`, `product_brand`, `product_price`, `product_color`) VALUES
(1, 'product 1', 'Laptop', 'Lenovo', '15800', '1'),
(2, 'product 2', 'Laptop', 'Lenovo', '41410', '0'),
(3, 'product 3', 'Computers', 'Lenovo', '15800', '0'),
(4, 'product 4', 'Laptop', 'Lenovo', '22500', '0'),
(5, 'product 5', 'Laptop', 'Dell', '22500', '1'),
(6, 'product 6', 'Laptop', 'Lenovo', '41410', '0'),
(7, 'product 7', 'Laptop', 'Dell', '22500', '0'),
(8, 'product 8', 'Computers', 'Lenovo', '15800', '1'),
(9, 'product 9', 'Computers', 'Dell', '22500', '1'),
(10, 'product 10', 'Computers', 'lenovo', '22500', '1'),
(11, 'product 11', 'Laptop', 'lenovo', '22500', '1'),
(12, 'product 12', 'Laptop', 'lenovo', '22500', '1'),
(13, 'product 13', 'Laptop', 'Lenovo', '22500', '0'),
(14, 'product 14', 'Laptop', 'Lenovo', '15800', '1'),
(15, 'product 15', 'Laptop', 'Lenovo', '41410', '0'),
(16, 'product 16', 'Laptop', 'Lenovo', '41410', '1'),
(17, 'product 17', 'Laptop', 'Lenovo', '22500', '0'),
(18, 'product 18', 'Laptop', 'Lenovo', '22500', '1'),
(19, 'product 19', 'Laptop', 'Lenovo', '15800', '0'),
(20, 'product 20', 'Laptop', 'Lenovo', '15800', '1'),
(21, 'product 21', 'Computers', 'Lenovo', '22500', '1'),
(22, 'product 22', 'Computers', 'Lenovo', '22500', '1'),
(23, 'product 23', 'Computers', 'Lenovo', '41410', '1'),
(24, 'product 24', 'Computers', 'Lenovo', '41410', '1'),
(25, 'product 13', 'Laptop', 'Dell', '22500', '0'),
(26, 'product 14', 'Laptop', 'Dell', '15800', '1'),
(27, 'product 15', 'Laptop', 'Dell', '15800', '0'),
(28, 'product 16', 'Laptop', 'Dell', '41410', '1'),
(29, 'product 25', 'Laptop', 'Dell', '41410', '1'),
(30, 'product 17', 'Laptop', 'Dell', '22500', '0'),
(31, 'product 18', 'Laptop', 'Dell', '41410', '1'),
(32, 'product 19', 'Laptop', 'Dell', '41410', '0'),
(33, 'product 20', 'Laptop', 'Dell', '15800', '1'),
(34, 'product 27', 'Laptop', 'Dell', '15800', '1'),
(35, 'product 21', 'Computers', 'Dell', '22500', '1'),
(36, 'product 22', 'Computers', 'Dell', '15800', '1'),
(37, 'product 23', 'Computers', 'Dell', '15800', '1'),
(38, 'product 24', 'Computers', 'Dell', '41410', '1'),
(39, 'product 28', 'Computers', 'Dell', '41410', '1'),
(40, 'product 13', 'Laptop', 'lenovo', '22500', '0'),
(41, 'product 14', 'Laptop', 'lenovo', '15800', '1'),
(42, 'product 15', 'Laptop', 'lenovo', '15800', '0'),
(43, 'product 16', 'Laptop', 'lenovo', '41410', '1'),
(44, 'product 25', 'Laptop', 'lenovo', '41410', '1'),
(45, 'product 17', 'Laptop', 'lenovo', '22500', '0'),
(46, 'product 18', 'Laptop', 'lenovo', '41410', '1'),
(47, 'product 19', 'Laptop', 'lenovo', '41410', '0'),
(48, 'product 20', 'Laptop', 'lenovo', '15800', '1'),
(49, 'product 27', 'Laptop', 'lenovo', '15800', '1'),
(50, 'product 21', 'Computers', 'lenovo', '22500', '1'),
(51, 'product 22', 'Computers', 'lenovo', '15800', '1'),
(52, 'product 23', 'Computers', 'lenovo', '15800', '1'),
(53, 'product 24', 'Computers', 'lenovo', '41410', '1'),
(54, 'product 28', 'Computers', 'lenovo', '41410', '1');

index.php

Index.php main root file with each simple script separately

Also Read :   Angularjs json stringify - angularjs parse json - angular to Json

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(Live Filter With Checkbox Using Jquery) dependencies and the HTML Elements that we have created.

<div id="frm" >
<form method="POST">
 <ul class="filter">
 <h4>Filter By Product Brand</h4>
   <?php
$db_con = mysql_connect('YOUR_HOST_NAME', 'root','');
$db = mysql_select_db('live24u', $db_con);

 $mylivequery = mysql_query("SELECT * FROM `product` GROUP BY `product_brand`");

  while($data_rows=mysql_fetch_array($mylivequery))
  {
  ?>

 
 <label><?php echo $data_rows['product_brand'];?></label><input type="checkbox" name="productids[]" value="<?php echo $data_rows['product_brand'];?>" id="<?php echo $data_rows['id'];?>" class="productids"/><br>
 <?php }
 ?>
   </ul>

</form>
</div>
  
 <center> <div id="my_live_results">
 <h3>Search Products Results</h3>
  <?php
$mylivequery = mysql_query("SELECT * FROM product");
while($data_rows=mysql_fetch_array($mylivequery)){
?>
  <?php echo $data_rows['name']."<br>";  ?>
<?php
  }
    ?>
 </div>
 <div id="display_data" style="border:1px dotted #3d3d3d;height:auto;width:450px;"></div>
 </center>

Getting Started for Live Filter With Checkbox Using Jquery

We have used CDN(libes) for jquery so you must need Your internet Data db_con for them to work on Live Filter With Checkbox Using Jquery.

Also Read :   Simple HTML Editor Example Made with vuejs - vue text editor

<script type="text/javascript" src="jquery.js"></script> 
<script>
$(document).ready(function(){
$('.productids').on('change',function(){ 

var liveval=$('.productids:checked').serialize();
 if(liveval){
		$.ajax({
		type: "POST",
		cache: false,
		url: "data_filter.php",
		data:{brandss:liveval},
		success: function(response){
			document.getElementById('display_data').style.display = "block";
			document.getElementById("display_data").innerHTML = response;
			$('#my_live_results').hide();
		}
	});
}
else
{
document.getElementById('display_data').style.display = "none";
$('#my_live_results').show();
}
});
});
</script>

style.css

Last step, we have add the Following CSS styles for our simple filter products using php mysql and jquery and our Custom styling.

<style>
#frm
{
width:180px;
float:left;
}
#my_live_results
{
border:1px dotted #3d3d3d;
height:auto;
width:450px;
}
h3
{
border-bottom:1px solid;
}
</style>

data_filter.php

<h3 style="border-bottom:1px solid;">Search Results</h3>
<?php
$db_con = mysql_connect('YOUR_HOST_NAME', 'root','');
$db = mysql_select_db('live24u', $db_con);

if($_POST['brandss']){


$product_brand_array=array();

parse_str($_POST['brandss'],$product_brand_array);

foreach($product_brand_array as $productids)
{
$productids;
}
$product_brand_ids=implode("','",$productids); 
echo "<br>";
$mylivequery = mysql_query("SELECT * FROM product WHERE product_brand IN ('$product_brand_ids')");
while($data_rows=mysql_fetch_array($mylivequery)){
?>
  <?php echo $data_rows['name']."<br>";  ?>
<?php
  }
  }
  ?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is use ajax to filter mysql results with multiple checkbox option And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.