Php 简明教程

PHP - AJAX Auto Complete Search

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

此应用程序有三个主要部分 −

  1. The XML Document

  2. JavaScript Code

  3. XML Parser in PHP

现在让我们详细讨论这三个部分 −

The XML Document

将以下 XML 脚本另存为文档根目录中的“ autocomplete.xml ”

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

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

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

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

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

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

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

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

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

</pages>

JavaScript Code

以下脚本为用户呈现一个文本字段，用于输入他选择的课程名称。每次击键时，都会调用一个 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://www.tutorialspoint.com">More Details</a>
   </form>
</body>
</html>

XML Parser in PHP

这是服务器上的 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 服务器运行的情况下，访问“http://localhost/index.php”，浏览器会显示一个输入文本字段。对于在其中键入的每个字符，相关的建议都会出现在其下面。

php ajax auto search