PHP - AJAX 自动完成搜索

自动完成功能是一种输入提示机制，当用户在提供的搜索框中输入数据时，它会显示输入建议。它也称为实时搜索，因为它会对用户的输入做出反应。在本例中，我们将使用 PHP 中的 AJAX 和 XML 解析器来演示自动完成文本框的使用。

此应用程序具有三个主要组成部分：

XML 文档
JavaScript 代码
PHP 中的 XML 解析器

现在让我们详细讨论这三个组成部分：

XML 文档

将以下 XML 脚本保存为“autocomplete.xml”到文档根目录文件夹

<?xml version = "1.0" encoding = "utf-8"?>
<pages>

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

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

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

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

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

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

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

   <link>
      <title>nodejs</title>
      <url>https://tutorialspoint.com/nodejs/index.htm </url>
   </link>
   
</pages>

JavaScript 代码

以下脚本呈现一个文本字段，供用户输入他选择的课程名称。每次按键都会调用一个 JavaScript 函数，并将输入值通过 GET 方法传递到服务器端的 PHP 脚本。服务器的响应会异步渲染。

将此代码保存为“index.php”。

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

PHP 中的 XML 解析器

这是服务器上的 PHP 脚本。它解析给定的 XML 源文档，读取输入字段中输入的字符，在解析的 XNL 对象中搜索它，并发送回响应。

将以下代码保存为“livesearch.php”。

<?php
   $xml_doc = new DOMDocument();
   $xml_doc->load('autocomplete.xml');

   $x=$xml_doc->getElementsByTagName('link');

   $q = $_GET['q'];
   $result = '';
   foreach($x as $node) {
      if (stripos("{$node->nodeValue}", $q) !== false) {
         $result .= "{$node->nodeValue}";
      }
   }

   // Set $response to "No records found." in case no hint was found
   // or the values of the matching values
   if ($result == '')
      $result = 'No records found.';

   // show the results or "No records found."
   echo $result;
?>

在 XAMPP 服务器运行的情况下，访问“https://127.0.0.1/index.php”，浏览器会显示一个输入文本字段。对于在其中键入的每个字符，相关的建议都会显示在其下方。

打印页面