How to Create Live Search In Html Using Ajax Ad PhP - Google Live Search / Instant Search Code And Example

Hi,

Here Is the code and example for how to create a live search or instant search for your website.It consist of 3 parts
1.A JavaScript including Ajax
2.A Input box to enter the keywords by user
3.A Php Code to do the searching

          Now , the JavaScript code is given below

 <script type="text/javascript">  
 function showResult(str)  
 {  
 if (str.length==0)  
  {  
  document.getElementById("livesearch").innerHTML="";  
  document.getElementById("livesearch").style.border="0px";  
  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("livesearch").innerHTML=xmlhttp.responseText;  
   document.getElementById("livesearch").style.border="0px solid #A5ACB2";  
   }  
  }  
 xmlhttp.open("GET","livesearch.php?q="+str,true);  
 xmlhttp.send();  
 }  
 </script>  

 Now copy the above script to your code main page.the above contain Ajax code for instant and dynamic data transfer.The code give below contain the text input type ,where the user will enter the text to search its just a div class ...

 <input type="text" size="11" onkeyup="showResult(this.value)" />  
 <div id="livesearch"> </div>  

                                                                                     
Now create a php page to do the search:

 <?php  
 $q=$_GET["q"];  
 include("dbconnect.php");  
 $event =mysql_query("select * from yourtable  where field LIKE '%$q%'");  
 if(mysql_num_rows($event)>0 )  
 {  
 while($row=mysql_fetch_array($event))  
 {  
 ?>  
 <a STYLE="text-decoration:none" href="yoursearchpage.php?event=<?php echo $row["field"]; ?></a>  
 <?php  
 }  
 }  
 ?>