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.tw/android/index.htm</url>
   </link>

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

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

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

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

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

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

   <link>
      <title>nodejs</title>
      <url>https://tutorialspoint.tw/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.tw">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:///index.php”，瀏覽器會顯示一個輸入文字欄位。對於在其中鍵入的每個字元，相關的建議都會顯示在其下方。

列印頁面