1. 创建前端页面（HTML + JavaScript）：
创建一个 HTML 页面，包含一个搜索输入框和用于显示搜索结果的容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Search with PHP and AJAX</title>
<script>
function search() {
var keyword = document.getElementById("searchBox").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("searchResults").innerHTML = this.responseText;
}
};
xhttp.open("GET", "search.php?keyword=" + keyword, true);
xhttp.send();
}
</script>
</head>
<body>
<label for="searchBox">Search:</label>
<input type="text" id="searchBox" oninput="search()">
<div id="searchResults"></div>
</body>
</html>
2. 创建服务器端 PHP 脚本：
创建一个 PHP 脚本，用于处理搜索请求并返回匹配的结果。在这个例子中，假设有一个数组存储了搜索的数据。
<!-- search.php -->
<?php
$data = array(
"Apple", "Banana", "Cherry", "Date", "Grape", "Lemon", "Orange", "Peach", "Pear"
);
$keyword = $_GET["keyword"];
$results = [];
foreach ($data as $item) {
if (stripos($item, $keyword) !== false) {
$results[] = $item;
}
}
if (empty($results)) {
echo "No results found.";
} else {
foreach ($results as $result) {
echo "<p>$result</p>";
}
}
?>
3. 运行应用：
将 HTML 文件和 PHP 文件放置在支持 PHP 的 web 服务器上，通过浏览器访问 HTML 文件。当用户在搜索框中输入关键词时，JavaScript 将通过 AJAX 请求将关键词发送给 PHP 脚本，后者将返回匹配的结果，然后前端页面将实时显示搜索结果。
请注意，这个例子是一个简化版本，实际应用中可能需要更复杂的逻辑、安全性处理以及与真实数据库的交互。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3651/PHP