PHP - AJAX Auto search

    You have worked with those fields where you enter for some string and you will get suggestions for auto-completing the field value. The same case we are creating using XML script to call auto-complete options. Check more about PHP - AJAX Auto search below.

    PHP - AJAX Auto search

    Below example will help you to auto-complete the text using PHP including the XML code.

    Example:

    <html>
       <head>
       <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 Here</h2>
             <input type = "text" size = "30" onkeyup = "showResult(this.value)">
             <div id = "livesearch"></div>
             <a href = "http://www.xxx.com">Click Here For More Details </a>
          </form>
       </body>
    </html>

    Output: Course Name Livesearch.php This script will call the XML file data and then the results are sent to the web browser.

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

    Above example is including the autocomplete.xml , below is the code for the XML file.

    <pages>
       <link>
          <title>Chemistry</title>
          <url>http://www.xxx.com/chemsitry/index.htm</url>
       </link>
       <link>
          <title>Maths</title>
          <url>http://www.xxx.com/maths/index.htm</url>
       </link>
       <link>
          <title>Physics </title>
          <url>http://www.xxx.com/physics/index.htm</url>
       </link>
    </pages>
    

    People are also reading: