Autocomplete Searchbox in database using PHP

index.php:

<form method="post" action="search.php" id="form1">
<div  style="margin: 0px 0px 0px 516px;">
<input type="text" id="category" name="category"   value=""/>
<input type="submit" class="but_style" name="search_list" value="Search" style="width:auto; border:solid thin  #b32d00;
border-radius:.3em; color:#FFF; background-color:#f7803b; cursor:pointer; height:27px;" ></div>
</form>

search.php:

<?php
if(isset($_POST['search_list'])) {
        if(trim($_POST['category'])) {
            $con[] = " category_name LIKE '%".trim($_POST['category'])."%' ";
        }
        if($con) {
            $condition = " WHERE ";
            $condition .= implode(" AND ", $con);           
        }}
        $query4 = "SELECT * FROM demo $condition ORDER BY category ASC";
    $result4 = mysql_query($query4);
    while($row4 = mysql_fetch_array($result4)) {
        $city[] = $row4;
    }
?>

View the output:

<form method="post" action=""> 
<table width="100%" id="table_layout"  border="1">
<tr>
<th>S.No</th>
<th>Category</th>
<th>Category Name</th>
<th>Sub Category</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>

</tr>

<?php 
if($city) { 
foreach($city as $key1 => $val1) {
$slno = $key1+1;
if($slno > 10 ) {
echo "<tr class='table_tr2' id='row$slno' style='display:none;'>";
}else{
echo "<tr class='table_tr2' id='row$slno'>";
}
echo '<td width="5%">'.$slno.'</td>';
echo '<td width="12%">'.$val1['category'].'</td>';
echo '<td width="12%">'.$val1['category_name'].'</td>';
echo '<td width="12%">'.$val1['sub_category'].'</td>';
echo '<td width="15%">'.$val1['price'].'</td>';
echo '<td width="15%">'.$val1['quantity'].'</td>';
echo '<td width="15%">'.$val1['total'].'</td>';

//echo '<td><img src=upload/$val1['image] width=50px height=50px></td>';
echo '</tr>';
}
} else {
echo "<tr class='table_tr2'><td colspan='7' style='text-align:center;height:125px;'><span class='NoResult'>No Records Found</span></td></tr>";
}
?>
</table>
</form> 

Database Structure:

--
-- Table structure for table `demo`
--

CREATE TABLE IF NOT EXISTS `demo` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `category` varchar(150) NOT NULL,
  `category_name` varchar(150) NOT NULL,
  `sub_category` varchar(150) NOT NULL,
  `price` int(30) NOT NULL,
  `quantity` int(30) NOT NULL,
  `total` int(30) NOT NULL,
  `image` varchar(150) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=31 ;

--
-- Dumping data for table `demo`
--

INSERT INTO `demo` (`id`, `category`, `category_name`, `sub_category`, `price`, `quantity`, `total`, `image`) VALUES
(25, '4', 'jobs', '6', 5000, 30, 150000, 'rose1.jpg'),
(23, '2', 'food', '3', 30, 3, 90, '191356xcitefun-cartoon-pluto.jpg'),
(24, '3', 'names', '8', 400, 30, 12000, 'ajax-loader.gif'),
(19, '1', 'juice', '1', 40, 30, 1200, 'rose2.jpg'),
(17, 'food', 'juice', 'rice', 10, 41, 410, 'download.jpg'),
(26, 'food', 'food', 'dosai', 34, 8, 272, 'images.jpg');

Explanitation:

In this Coding we no need to use the javascript and any other library files to do autocomplete 
search concept and it can be coded by the Core PHP only and it is easy to understand.I hope this coding is to be very usefull.

Multiply of two rows or field using javascript

Script:

<script type="text/javascript" language="Javascript">
function getVal(value)
{
price = document.formname.price.value;
quantity = document.formname.quantity.value;
sum = price*quantity;
// document.formname.txtDisplay.value = sum2;(or)
document.getElementById('total').value=sum;
}
</script>

or

<script type="text/javascript">
function calculate() {
        var price = document.getElementById('price').value; 
        var quantity = document.getElementById('quantity').value;
        var total = document.getElementById('total');   
        var myResult = price * quantity;
        result.value = myResult;
      
        
    }
</script>

index.php:

<form name = "formname" action="" method="post">
    
<table width="70%" align="center" >
<tr>Price<input type="text" name="quantity"  value="" /></tr>
<tr>Quantity<input type = "text" name="select2"  value=""  onkeyup="javascript:getVal();" onkeydown="javascript:getVal();" /></tr>
<tr>Total <input type = "text" name = "txtDisplay"   value ="" id="total"/></tr>
</table>
</form>

or

<table width="80%" border="0">
  <tr>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
  </tr>
  <tr>
    <td><input id="price" type="text" oninput="calculate()" /></td>
    <td><input id="quantity" type="text" oninput="calculate()" /></td>
    <td><input id="total" /></td>
  </tr>
 
</table>
    

 In this coding i included two forms and two javascript.In these above which one is to easy and easy to understand you can try it.
 One of the above code oninput function is to used and other code is onkeyup and onkeydown.
 Instead of onkeyup and onkeydown we can use onblur='OnChange(this.value).
 the difference b/w the both is if we will use OnChange event means u click on the field only the value is been displayed.
 But we use onkeyup and onkeydown when typing the value the value is ro dispalyed.

Using Ajax Categories and their Sub Categories and Sub Sub Categories display

Index.php:

 <html>
<body>
 <form id="custom" method="post" name="form" enctype="multipart/form-data">
   <fieldset title="Location Information" >
   <legend></legend>
    <label>catgories</label>
    <select name="main_id" onchange="showCustomer(this.value)">
   <option value="" class="search"><---Select the catagoeris--> 
   </option>                               
      <?php 
 $sel1=mysql_query("select * from categories order by cat_name asc");
  while($cat=mysql_fetch_array($sel1))
   {         
 $cat_id=$cat['cat_id']; 
 $cat_name=$cat['cat_name'];                                           
 <option value="<?php echo $cat_id; ?>"><?php echo $cat_name; ?></option>
<?php } ?>
 </select>
 <label>Sub Catgories</label>
  <p id="txtHint">
  <select name="sub"  onchange="show(this.value)">
    <option value=""><---Select sub catagoeris--></option>
   </select>
     </p>
    <p id="sub_sub"> 
  <select  name="sub_sub">
   <option value=""><--Select name--></option>
   </p>
 </body>
</html>

ajax.php:

<?php
include("conn.php");
?>
<?php if(isset($_GET['q'])) 

{

$id1=$_GET['q'];

?><p>
      <select  onchange="show(this.value)" name="sub">
      <option value=""><--Select--></option>
      <?php
      $select1=mysql_query("select * from sub_categories where cat_id='$id1'");
      while($menu2=mysql_fetch_array($select1))
      {
      ?>
      <option value="<?php echo $menu2['sub_cat_id'];?>"> <?php echo $menu2['sub_cat_name'];?></option>
      <?php
      }

      ?>
      
      </select> 
       
      </p>
     <?php
     }
     if(isset($_GET['s'])) 

{

$id3=$_GET['s'];

              $sub_sub_cat=mysql_query("select * from sub_sub_categories where sub_cat_id='$id3'") or die(mysql_error());
             if(mysql_num_rows($sub_sub_cat)=="")
             {
                 
             }
    
       else
      {
          ?>
     <p> 
     
   
      <select  name="sub_sub">
      <option value=""><--Select name--></option>
      <?php
      $select2=mysql_query("select * from sub_sub_categories where sub_cat_id='$id3'");
      while($menu3=mysql_fetch_array($select2))
      {
      ?>
      <option value="<?php echo $menu3['id'];?>"> <?php echo $menu3['sub_sub_cat_name'];?></option>
      <?php
      }
      
      ?>
      
      </select>
      </p>
      
     <?php  }} ?> 
     

ajax script:(script1)

<script>
        function showCustomer(str)
        {
        var xmlhttp;    
        if (str=="")
          {
          document.getElementById("txtHint").innerHTML="";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","ajax.php?q="+str,true);
        xmlhttp.send();
        }
        </script>

ajax script:(script2)

<script>

        function show(str)
        {
        var xmlhttp;    
        if (str=="")
          {
          document.getElementById("sub_sub").innerHTML="";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("sub_sub").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","ajax.php?s="+str,true);
        xmlhttp.send();
        }
        </script>  

This Coding is used for categories and their sub categories and sub sub categories.If we click on category and it display their that particular categories types and also that sub category you click that particular sub sub categories types also displayed.The script1 is used for to display the sub category and script2 is used for to display the sub sub categories.I hope this very useful for you.

db screenshot:category

sub category: