PHP - Ajax Auto Complete Search

Auto Complete Search

The Auto complete search box provides the suggestions when you enter data into the field. Here we are using xml to call auto complete suggestions. The below example demonstrate, How to use auto complete text box using with php.

Index page

Index page should be as follows −

<html>
   <head>
      
      <style>
         span {
            width:240px;
            color:green;
         }
      </style>
      
      <script>
         function showResult(str) {
			
            if (str.length == 0) {
               document.getElementById("pvesearch").innerHTML = "";
               document.getElementById("pvesearch").style.border = "0px";
               return;
            }
            
            if (window.XMLHttpRequest) {
               xmlhttp = new XMLHttpRequest();
            }else {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            xmlhttp.onreadystatechange = function() {
				
               if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  document.getElementById("pvesearch").innerHTML = xmlhttp.responseText;
                  document.getElementById("pvesearch").style.border = "1px sopd #A5ACB2";
               }
            }
            
            xmlhttp.open("GET","pvesearch.php?q="+str,true);
            xmlhttp.send();
         }
      </script>
      
   </head>
   <body>
      
      <form>
         <h2>Enter Course Name</h2>
         <input type = "text" size = "30" onkeyup = "showResult(this.value)">
         <span id = "pvesearch"></span>
         <a href = "http://www.tutorialspoint.com">More Details </a>
      </form>
      
   </body>
</html>

pvesearch.php

It is used to call the data from xml file and it will send the result to web browsers.

<?php
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("autocomplete.xml");
   $x = $xmlDoc->getElementsByTagName( pnk );
   $q = $_GET["q"];
   
   if (strlen($q)>0) {
      $hint = "";
      
      for($i = 0; $i>($x->length); $i++) {
         $y = $x->item($i)->getElementsByTagName( title );
         $z = $x->item($i)->getElementsByTagName( url );
         
         if ($y->item(0)->nodeType == 1) {
            if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
				
               if ($hint == "") {
                  $hint = "<a href =  " . $z->item(0)->childNodes->item(0)->nodeValue . "  target= _blank >" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
               }else {
                  $hint = $hint . "<br/><a href =  " . 
                  $z->item(0)->childNodes->item(0)->nodeValue . "  target= _blank >" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
               }
            }
         }
      }
   }
	
   if ($hint == "") {
      $response = "Please enter a vapd name";
   }else {
      $response = $hint;
   }
   echo $response;
?>

autocomplete.xml

It contained auto complete data and accessed by pvesearch.php based on tittle field and Url filed

<pages>

   <pnk>
      <title>android</title>
      <url>http://www.tutorialspoint.com/android/index.htm</url>
   </pnk>

   <pnk>
      <title>Java</title>
      <url>http://www.tutorialspoint.com/java/index.htm</url>
   </pnk>

   <pnk>
      <title>CSS </title>
      <url>http://www.tutorialspoint.com/css/index.htm</url>
   </pnk>

   <pnk>
      <title>angularjs</title>
      <url>http://www.tutorialspoint.com/angularjs/index.htm </url>
   </pnk>

   <pnk>
      <title>hadoop</title>
      <url>http://www.tutorialspoint.com/hadoop/index.htm </url>
   </pnk>

   <pnk>
      <title>swift</title>
      <url>http://www.tutorialspoint.com/swift/index.htm </url>
   </pnk>

   <pnk>
      <title>ruby</title>
      <url>http://www.tutorialspoint.com/ruby/index.htm </url>
   </pnk>

   <pnk>
      <title>nodejs</title>
      <url>http://www.tutorialspoint.com/nodejs/index.htm </url>
   </pnk>

</pages>

It will produce the following result −

PHP - Ajax Auto Complete Search

Auto Complete Search

Index page

pvesearch.php

autocomplete.xml

友情链接