Product Search Filtering Using PHP and Ajax - Mostlikers

25 August, 2015

Product Search Filtering Using PHP and Ajax

In this tutorial, we will see how to create search filter in PHP. Here I have created an E-commerce website product search filters like Flipkart and Amazon search filter functionality using PHP,MySQLi and ajax. The output result will get without refresh the page. Follow this simple code create eCommerce site search filter.

Product search filtering using php and ajax





In this tutorial design, i have used bootstrap. Add bootstrap below file link on your website.

PHP

-- index.php

-- ajax_search.php 

CSS

-- bootstrap.min.css 

-- bootstrap-theme.min.css

js

-- jquery-1.11.3.min.js 



Database


Create sample table name called "products" and insert some information, size value like (32,36,38).
CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `description` varchar(250) NOT NULL,
  `size` int(11) NOT NULL,
  `price` decimal(10,0) NOT NULL,
  PRIMARY KEY (`id`)
);

Bootstrap css

Add below boostrap css link and jquery link <head></head> tag.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

index.php

<?php
    $db=new mysqli('localhost','root','','mostlikers'); 
    $all_row=$db->query("SELECT * FROM products");
?>
<html>
<body>
<div class="container">
<div class="row">      
<div class="col-sm-3 col-md-3">
    <form id="search_form">
    <div class="well">
    <h4 class="text-info">Search by Size</h4>
    <input value="32" class="sort_rang" name="size[]"  type="checkbox"> 32
    <input value="36" class="sort_rang" name="size[]"  type="checkbox"> 36
    <input value="38" class="sort_rang" name="size[]"  type="checkbox"> 38
    </div>
    </form>
</div>
</div>   
<div class="row">
<div class="ajax_result">
<?php if(isset($all_row) && is_object($all_row) && count($all_row)): $i=1;?>
<?php foreach ($all_row as $key => $product) { ?>       
<div class="col-sm-3 col-md-3">
<div class="well">
<h2 class="text-info"><?php echo $product['name']; ?></h2>
<p><span class="label label-info">Size : 
<?php echo $product['size']; ?></span></p>                      
<p><?php echo $product['description']; ?></p>
<hr>
<h3>$<?php echo $product['price']; ?> / month</h3>
<hr>
<p><a class="btn btn-default btn-lg" href="#">
<i class="icon-ok"></i> Add cart</a></p>
</div>
</div>        
<?php } ?>
<?php endif; ?>
</div>
</div>      
</div>
</body>
</html>

ajax

Here I have created. sort_rang class, on change this class  data will post on ajax_search.php file.
<script type="text/javascript">
$(document).on('change','.sort_rang',function(){
   var url = "ajax_search.php";
   $.ajax({
     type: "POST",
     url: url,
     data: $("#search_form").serialize(),
     success: function(data)
     {                  
        $('.ajax_result').html(data);
     }               
   });
  return false;
});
</script>

ajax_search.php

SQL Query, i have used WHERE IN. The IN operator allows you to specify multiple values in a WHERE clause. after that ajax response to the script data
<?php
    $db=new mysqli('localhost','root','','mostlikers');
    $sql="SELECT * FROM products";
    extract($_POST);
    if(isset($size)) 
        $sql.=" WHERE size IN (".implode(',', $size).")";
    $all_row=$db->query($sql);
?>
<?php if(isset($all_row) && is_object($all_row) && count($all_row)): $i=1;?>
    <?php foreach ($all_row as $key => $product) { ?>       
    <div class="col-sm-3 col-md-3">
        <div class="well">
            <h2 class="text-info"><?php echo $product['name']; ?></h2>
            <p><span class="label label-info">Size :
             <?php echo $product['size']; ?></span></p>                      
            <p><?php echo $product['description']; ?></p>
            <hr>
            <h3>$<?php echo $product['price']; ?> / month</h3>
            <hr>
          <p><a class="btn btn-default btn-lg" href="#">
          <i class="icon-ok"></i> Add cart</a></p>
        </div>
    </div>
   <?php } ?>
<?php endif; ?>

Search filter product table


Product search filtering using php and ajax

Thank you for visiting. if have any queries write your comments below.
God, our Creator, has stored within our minds and personalities, great potential strength and ability. Prayer helps us tap and develop these powers.  - A. P. J. Abdul Kalam










Related Topics



43 comments:

  1. How to store url On refresh search result gone

    ReplyDelete
  2. what do for more isset value. example color, brand, price

    ReplyDelete
  3. Use same form to post brand value.
    if(isset($brand) && isset($size))
    $sql.=" AND brand IN (".implode(',', $brand).")";

    ReplyDelete
  4. how to paginate in filter???

    ReplyDelete
    Replies
    1. http://www.mostlikers.com/2015/11/auto-load-more-data-dynamically-on-page.html

      Delete
  5. it is nice good but can i know what is the value $size contain

    ReplyDelete
    Replies
    1. I have updated table pic for your reference.

      Delete
  6. it seems to work well but it unable to fetch data in string format it works well in integer value can you have a solution to fetch data in string form

    ReplyDelete
  7. i have created search system by brand price offer price everything goes well only their is one problem when i go for brand it accept only one value like when i click nokia then it will show brands of nokia but when i click on another checkbox then it show blank result

    ReplyDelete
  8. this is my code


    if(isset($size))
    $sql.=" and op in (".implode(',', $size).")";
    if(isset($brand))
    $sql.="and price in (".implode(',', $brand).")";
    $tinu=implode(',', $name);

    if(isset($name))
    $sql.="and brand like '%$tinu%'";


    $qriy="SELECT * from `stock` WHERE cat='' and 1 $sql ";
    $all_row=$db->query($qriy);
    ?>

    ReplyDelete
  9. Hi, i am working with Konarch.. we need to know multiple value string.. suppose.. we want to choose multiple mobile brand in string format.. but the system only one value, when i am doing it only taking one value.. suppose i select Nokia, it only show Nokia Result,, if i want Nokia & Samsung Result... it does not fetch.. Please help..
    Thank You

    ReplyDelete
  10. brother i love you save my day google and yahoo are waiting for you

    ReplyDelete
  11. hi karthick its me konarch i want to know i am using session for add to cart system for before login but their is a problem i am unable to udate the product info like quantity using session i am using push array function can you help me how update session variables

    ReplyDelete
  12. hi this code is working fine with single category how can we check brand , price , product name

    ReplyDelete
    Replies
    1. Follow sql statement
      if(isset($brand) && isset($size))
      $sql.=" AND brand IN (".implode(',', $brand).")";

      Delete
    2. $sql="SELECT * FROM products";
      extract($_POST);

      if(isset($size) && isset($price))
      $sql.=" WHERE size IN (".implode(',', $size).") OR price IN (".implode(',', $price).")";
      else if(isset($size))
      $sql.=" WHERE size IN (".implode(',', $size).")";

      else if(isset($price))

      $sql.=" WHERE (price IN (".implode(',', $price)."))";

      $all_row=$db->query($sql);

      Delete
  13. The demo is awesome ...... plz add more filter options like price brand and update a link plz...............

    ReplyDelete
  14. I've added more Checkbox filters and its working super smooth I don't know how to implement dropdown to refine results ,and whenever page is refreshed data will reset, how to overcome this problem plz reply me I am curiously waiting for your reply once again thank you very much for such nice tutorial.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. I hope you want like amazon,filpkart code correct. I have done that concept i will update very soon.

      Delete
  15. How to add n0 results found message if no result found in ur coding ?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  16. sir
    i am use this code.
    if(isset($brand) && isset($size))
    $sql.=" AND brand IN (".implode(',', $brand).")";
    this code is correct. but working on at give both isset value but i give only single isset value then given me not data. so pls give me correct data.
    thanks....
    sanjeev sharma

    ReplyDelete
    Replies
    1. if(isset($brand))
      $sql.=" AND brand IN (".implode(',', $brand).")";
      if(isset($size))
      $sql.=" AND size IN (".implode(',', $size).")";

      Try this code it will work.



      Delete
  17. Hey! If I have two values in checkbox like a range between 36-38. How I can do this?

    ReplyDelete
  18. WHERE column_name BETWEEN 36 AND 38

    ReplyDelete
  19. Thanx for reply
    but if I have
    input type="checkbox and values are 10"-10.9"

    how I will pass 10 and 10.9 in value for one checkbox value

    ReplyDelete
  20. I try like this
    input type="checkbox" values="36 38"
    input type="checkbox" values="38 40"
    input type="checkbox" values="30 42"
    and in php
    (explode(" ",$size));
    how can I use this in sql query

    ReplyDelete
  21. hey, i am not getting output result in index.php if i use "is_object($all_row)". If i remove this i will get output result however i am getting repeated data (due to foreach loop in index.php), how to stop repeated data? i am using mysql query (not mysqli).

    ReplyDelete
  22. I have a text field in the same form..then how can i get the value of text box for filteration

    ReplyDelete
  23. hi... this demo only working for a locallhost. not working online. i changed hostname,username,password and database name. but still not working

    ReplyDelete
    Replies
    1. I am sure check you're database connection file

      Delete