PHP Ajax Auto Complete Search

发布于 2022.08.08

Auto Complete Search The Auto complete search box provi…

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

类别：PHP 技巧、

本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。

Auto Complete Search

Index page

livesearch.php

autocomplete.xml

猜你喜欢GUESS YOU LIKE

WordPress静态缓存插件WP Super Cache

WordPress非插件版插入表格

WordPress的代码高亮插件CodeColorer介绍及使用

WordPress 如何设置摘要字数

WordPress不使用插件创建xml和html网站地图

WordPress设置摘要字数

评论 (0)COMMENT