Php 简明教程

PHP - AJAX Auto Complete Search

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

Autocomplete feature is a typeahead mechanism to show input suggestion as the user enters data in the search box provided. It is also called live search because it reacts to the users' input. In this example, we shall use AJAX and XML parser in PHP to demonstrate the use of auto complete text box.

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

This application has three main constituents −

  1. The XML Document

  2. JavaScript Code

  3. XML Parser in PHP

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

Let us now discuss these three constituents in detail −

The XML Document

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

Save the following XML script as "autocomplete.xml" in the document root folder

<?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 脚本。服务器响应将异步呈现。

The following script renders a text field for the user to enter a course name of his choice. On every keystroke a JavaScript function is called, and the input value is passed to the server-side PHP script with GET method. The server’s response is asynchronously rendered.

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

Save this code as "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 对象中进行搜索，然后将响应发送回。

This the PHP script on the server. It parses the given XML source document, reads the characters entered in the input field, searches for it in the parsed XNL object, and sends back the response.

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

Save the following code as "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”，浏览器会显示一个输入文本字段。对于在其中键入的每个字符，相关的建议都会出现在其下面。

With the XAMPP server running, visit "http://localhost/index.php" and the browser displays a input text field. For each character typed in it, the relevant suggestions appear below it.

php ajax auto search