Search This Blog

Tuesday, February 21

Ajax Live Data Search using Jquery PHP MySql

Here is the solution for Dynamic table search Based on Ajax, Jquery, PHP MySql




Source Code

index.php

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dynamic Search Based on name</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
    <br />
    <h2 align="center">Search Based on Medicine Name</h2><br />
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">Search</span>
            <input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
        </div>
    </div>
    <br />
    <div id="result"></div>
</div>
</body>
</html>


<script>
    $(document).ready(function(){

        load_data();

        function load_data(query)
        {
            $.ajax({
                url:"fetch.php",
                method:"POST",
                data:{query:query},
                success:function(data)
                {
                    $('#result').html(data);
                }
            });
        }
        $('#search_text').keyup(function(){
            var search = $(this).val();
            if(search != '')
            {
                load_data(search);
            }
            else
            {
                load_data();
            }
        });
    });
</script>

search.php

<?php
//fetch.php

include 'connection.php';
$connect = $conn;
$output = '';
if (isset($_POST["query"])) {
    $search = mysqli_real_escape_string($connect, $_POST["query"]);

    $query = "
  SELECT * FROM product_mst 
  WHERE Product_name LIKE '%" . $search . "%' 
  OR Product_name LIKE '%".$search."%' 
  OR Product_name LIKE '%".$search."%' 
  OR Product_name LIKE '%".$search."%' 
  OR Product_name LIKE '%".$search."%' ";
} else {
    $query = "
  SELECT * FROM product_mst ORDER BY Product_name
 ";
}
$result = mysqli_query($connect, $query);
if (mysqli_num_rows($result) > 0) {
    $output .= '
  <div class="table-responsive">
   <table class="table table bordered">
    <tr>
     <th>Name</th>
     <th>Price</th>
     <th>Type</th>
     <th>Manfacturer Name</th>
     <th>Available</th>
     <th>manufacturing Date</th>
     <th>Expiry Date</th>
    </tr>
 ';
    while ($row = mysqli_fetch_array($result)) {
        $output .= '
   <tr>
    <td>' . $row["Product_name"] . '</td>
    <td>' . $row["Rate"] . '</td>
    <td>' . $row["Product_Type"] . '</td>
    <td>' . $row["Company_Name"] . '</td>
    <td>' . $row["Quantity"] . '</td>
    <td>' . $row["Product_mfg_date"] . '</td>
    <td>' . $row["Product_exp_date"] . '</td>
   </tr>
  ';
    }
    echo $output;
} else {
    echo 'Data Not Found';
}

?>


Database

Name : testing

For Creating Table called product_mst

CREATE TABLE `product_mst` (
`Pk_Productid` INT(255) NOT NULL AUTO_INCREMENT,
`Product_name` VARCHAR(50) NOT NULL COMMENT 'Product name ',
`Rate` INT(30) NOT NULL COMMENT 'Product Rate',
`Product_Type` VARCHAR(50) NOT NULL COMMENT 'Product type',
`Company_Name` VARCHAR(50) NOT NULL COMMENT 'Product Company name',
`Quantity` INT(255) NOT NULL COMMENT 'Product Quantity',
`Product_mfg_date` DATE NOT NULL COMMENT 'Product manfacture date',
`Product_exp_date` DATE NOT NULL COMMENT 'Product expiry date',
PRIMARY KEY (`Pk_Productid`)
)



Sample output :

Hope it is Useful... :)



No comments:

Post a Comment