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>
         div {
            width:240px;
            color:green;
         }
      </style>

      <script>
         function showResult(str) {

            if (str.length == 0) {
               document.getElementById("livesearch").innerHTML = "";
               document.getElementById("livesearch").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("livesearch").innerHTML = xmlhttp.responseText;
                  document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
               }
            }

            xmlhttp.open("GET","livesearch.php?q="+str,true);
            xmlhttp.send();
         }
      </script>

   </head>
   <body>

      <form>
         <h2>Enter Course Name</h2>
         <input type = "text" size = "30" onkeyup = "showResult(this.value)">
         <div id = "livesearch"></div>
         <a href = "http://www.codingdict.com">More Details </a>
      </form>

   </body>
</html>

livesearch.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('link');
   $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 valid name";
   }else {
      $response = $hint;
   }
   echo $response;
?>

autocomplete.xml

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

<pages>

   <link>
      <title>android</title>
      <url>http://www.CodingDict.com/android/index.htm</url>
   </link>

   <link>
      <title>Java</title>
      <url>http://www.CodingDict.com/java/index.htm</url>
   </link>

   <link>
      <title>CSS </title>
      <url>http://www.CodingDict.com/css/index.htm</url>
   </link>

   <link>
      <title>angularjs</title>
      <url>http://www.CodingDict.com/angularjs/index.htm </url>
   </link>

   <link>
      <title>hadoop</title>
      <url>http://www.CodingDict.com/hadoop/index.htm </url>
   </link>

   <link>
      <title>swift</title>
      <url>http://www.CodingDict.com/swift/index.htm </url>
   </link>

   <link>
      <title>ruby</title>
      <url>http://www.CodingDict.com/ruby/index.htm </url>
   </link>

   <link>
      <title>nodejs</title>
      <url>http://www.CodingDict.com/nodejs/index.htm </url>
   </link>

</pages>

It will produce the following result −

Autocomplete Search