PHP Ajax自动完成搜索

自动完成搜索

当您在字段中输入数据时，自动完成搜索框会提供建议。在这里，我们使用XML来调用自动完成的建议。下面的示例演示了如何在php中使用自动完成文本框。

索引页面

索引页面应该如下所示−

<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.tutorialspoint.com">More Details </a>
      </form>

   </body>
</html>

livesearch.php

它用于从xml文件中调用数据，并将结果发送给web浏览器。

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

它包含自动完成数据，并且通过livesearch.php根据标题字段和URL字段访问。

<pages>

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

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

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

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

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

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

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

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

</pages>

它将产生以下结果−

PHP Ajax自动完成搜索