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

Hi,
Code For Google live search instant search

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  
 }  
 }  
 ?>  

Comments

  1. Your article is really informative. Thanks for updating new information about PHP. Your information is really helpful for all online beginners. Thanks for sharing.

    ReplyDelete

Post a Comment

Popular posts from this blog

How To Install LEX and YACC in Linux or Ubuntu

How to Implement Two - Pass Assembler in C / Assembler C Code

Lex Program To Check The Syntax of For Loop