PHP - AJAX 自动完成搜索

简介

你好！欢迎加入我们使用 PHP 和 AJAX 编程的旅程。今天，我们将深入探讨如何使用 PHP 和 AJAX 创建一个自动完成搜索功能。本教程专为编程初学者设计，无需任何编程经验。那么，让我们开始吧！

PHP - AJAX Auto Complete Search

XML 文档

在我们创建自动完成搜索功能之前，我们需要设置一个 XML 文档作为我们的数据源。XML 文档是一种以结构化格式存储的数据集合，可以轻松地被人机和机器读取。在这个例子中，我们的 XML 文档将包含世界各地的城市列表。

<?xml version="1.0" encoding="UTF-8"?>
<cities>
<city>纽约</city>
<city>洛杉矶</city>
<city>芝加哥</city>
<city>休斯顿</city>
<city>凤凰城</city>
<city>费城</city>
<city>圣安东尼奥</city>
<city>圣地亚哥</city>
<city>达拉斯</city>
<city>圣何塞</city>
</cities>

将这个 XML 文档保存为 cities.xml，放在与 PHP 文件相同的目录下。

JavaScript 代码

现在我们的 XML 文档已经准备好了，接下来我们要写一些 JavaScript 代码来从 XML 文档中获取数据，并在用户开始在搜索框中输入时显示一个下拉列表。我们将使用 AJAX 来实现这一功能，而无需刷新页面。

首先，让我们创建一个包含搜索框和下拉列表的 HTML 表单：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>自动完成搜索</title>
</head>
<body>
<form id="searchForm">
<input type="text" id="searchBox" onkeyup="showSuggestions(this.value)">
<select id="suggestionList"></select>
</form>
<script src="autocomplete.js"></script>
</body>
</html>

接下来，在名为 autocomplete.js 的单独文件中编写 JavaScript 代码：

function showSuggestions(str) {
if (str.length == 0) {
document.getElementById("suggestionList").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("suggestionList").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "get_suggestions.php?q=" + str, true);
xmlhttp.send();
}
}

在这段代码中，我们定义了一个名为 showSuggestions 的函数，它接受一个字符串作为输入。当用户在搜索框中输入时，这个函数会使用输入值被调用。如果输入长度为零，我们清空建议列表。否则，我们创建一个 XMLHttpRequest 对象来发送一个 AJAX 请求到一个名为 get_suggestions.php 的 PHP 文件，并将查询参数 q 设置为输入值。

PHP 代码

现在，让我们转到 PHP 的部分。我们将创建一个名为 get_suggestions.php 的文件，用于处理 AJAX 请求并返回匹配的城市名称作为 HTML 列表：

<?php
$query = $_GET['q'];
$xml = simplexml_load_file('cities.xml');
$matchingCities = array();

foreach ($xml->city as $city) {
if (strpos(strtolower($city), strtolower($query)) !== false) {
$matchingCities[] = $city;
}
}

echo '<ul>';
foreach ($matchingCities as $city) {
echo '<li>' . $city . '</li>';
}
echo '</ul>';
?>

在这段 PHP 代码中，我们首先使用 simplexml_load_file 函数加载 XML 文档。然后，我们遍历 XML 文档中的每个城市，并检查查询字符串是否在城名中（忽略大小写）。如果找到匹配项，我们将其添加到 $matchingCities 数组中。最后，我们输出一个包含匹配城市名称的无序列表 (<ul>)。

就这样！你现在使用 PHP 和 AJAX 创建了一个基本的自动完成搜索功能。记住将这三个文件 (index.html、autocomplete.js 和 get_suggestions.php) 放在同一个目录下，然后在网页浏览器中打开 index.html 来查看搜索框的实际效果。

随着你在编程道路上的继续前进，你会发现有许多方法可以实现自动完成功能，比如使用 React 或 Angular 这样的框架，甚至使用 Vue.js 或 Svelte 这样的现代前端库。但就目前而言，这个简单的例子应该为你提供了一个坚实的基础。

祝你编程愉快！

Credits: Image by storyset