PHP - AJAX 搜尋：初學者指南

你好，未來的 PHP 巫師們！我很興奮能成為你們在 AJAX 親和的搜尋功能世界中的引路人。作為一個教編程多年的老師，我迫不及待地想與你們分享這些知識。那麼，我們就挽起袖子，開始吧！

PHP - AJAX Search

AJAX 搜尋是什麼？

在我們開始編程之前，讓我們先了解 AJAX 搜尋到底是什麼。想像你在一個巨大的圖書館裡，尋找一本書。如果你可以輸入書名，並立即看到結果顯示，而不是跑來跑去查看每個書架，這不是很好嗎？這正是 AJAX 搜尋為網站所做的！

AJAX 的全稱是 Asynchronous JavaScript and XML。別擔心這聽起來很複雜 - 到了這個教學的結尾，你會像專家一樣使用它！

第一步：設定我們的專案

讓我們開始創建我們專案所需的文件。我們需要三個文件：

index.html（我們的主頁，帶有搜尋框）
search.php（我們的 PHP 腳本，將處理搜尋）
script.js（我們的 JavaScript 文件，用於發起 AJAX 請求）

創建 index.html

首先，讓我們創建一個 HTML 文件，帶有一個簡單的搜尋框：

<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX 搜尋範例</title>
</head>
<body>
<h1>AJAX 搜尋</h1>
<input type="text" id="searchBox" placeholder="搜尋...">
<div id="results"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

在這個文件中，我們創建了一個簡單的搜尋框和一個 div 用於顯示我們的結果。我們還包含了 jQuery 以便我們更容易地發起 AJAX 請求，並連接了我們的 script.js 文件。

第二步：創建我們的 PHP 搜尋腳本

現在，讓我們創建我們的 search.php 文件。這將是我們搜尋功能的後端：

<?php
// 模擬數據庫的數組
$fruits = array("Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape");

// 從 AJAX 請求中獲取搜尋詞
$searchTerm = $_GET['term'];

// 根據搜尋詞過濾水果數組
$results = array_filter($fruits, function($fruit) use ($searchTerm) {
return stripos($fruit, $searchTerm) !== false;
});

// 以 JSON 格式返回結果
echo json_encode(array_values($results));

讓我們分解一下：

我們創建一個簡單的水果數組來模擬數據庫。
我們從 GET 請求中獲取搜尋詞（由我們的 AJAX 調用發送）。
我們使用 array_filter 函數根據我們的搜尋詞過濾水果數組。
最後，我們以 JSON 格式返回結果，這對 JavaScript 來說很容易使用。

第三步：創建我們的 JavaScript 文件

現在來到令人興奮的部分 - 讓我們創建 script.js 文件來實現 AJAX 的魔法！

$(document).ready(function() {
$('#searchBox').on('keyup', function() {
var searchTerm = $(this).val();
if(searchTerm.length > 1) {
$.ajax({
url: 'search.php',
type: 'GET',
data: {term: searchTerm},
dataType: 'json',
success: function(data) {
var results = '';
$.each(data, function(index, value) {
results += '<p>' + value + '</p>';
});
$('#results').html(results);
}
});
} else {
$('#results').html('');
}
});
});

讓我們一步步分解：

我們等待文檔準備好。
我們在我們的搜尋框上監聽 'keyup' 事件。
如果搜尋詞超過一個字符，我們發起一個 AJAX 請求。
我們將搜尋詞發送到我們的 PHP 腳本。
當我們收到結果時，我們將其格式化為 HTML 並顯示。

這就是全部！一個完整的 AJAX 搜尋系統只需三個文件。

組合所有部分

現在，我們有了所有的部件，讓我們看看它們是如何一起工作的：

當你在搜尋框中輸入時，JavaScript 檢測到 'keyup' 事件。
如果你輸入了超過一個字符，它發起一個 AJAX 請求到 search.php。
search.php 接收你的搜尋詞，找到匹配的水果，並以 JSON 格式返回它們。
JavaScript 接收這個 JSON，將其格式化為 HTML，並在頁面上顯示。

所有這些都是在無需重新加載頁面的情況下立即發生的。很酷吧？

結論

恭喜你！你剛剛建立了你的第一個 AJAX 搜尋系統。這只是開始 - 你可以擴展它以搜尋實際的數據庫，添加更複雜的過濾器，甚至實現自動完成功能。

記住，精通編程的關鍵是練習。嘗試修改這段代碼，添加你自己的功能，最重要的是，享受樂趣！

這裡是一個總結我們在這個教學中使用的方法的表格：

方法	描述
$.ajax()	jQuery 方法用於執行 AJAX 請求
array_filter()	PHP 函數用於過濾數組元素，使用回調函數
json_encode()	PHP 函數將 PHP 數組轉換為 JSON 字符串
$.each()	jQuery 方法用於迭代數組或對象

持續編碼，持續學習，在你意識到之前，你將會創建出令人驚艷的網絡應用程序。下次見，快樂編程！

Credits: Image by storyset