在現代的網站上，一個有用的搜尋框是不可或缺的。這個功能可以大幅簡化使用者的搜尋流程，並提高網站的使用者體驗。而在搜尋框旁邊加上一個提示框，更是將使用者的搜尋效率提升到了一個新的高度。那麼，本文將介紹如何使用 PHP 來實作一個搜尋框提示框功能。
一、實作原理
在 PHP 實作搜尋提示框的過程中，我們需要使用 AJAX 技術。主要分為以下幾個步驟：
二、實作步驟
我們先建立一個名為products 的商品表，包含以下欄位：
id int(11) 商品 ID name varchar(255) 商品名称 description text 商品描述 price decimal(10,2) 商品价格
我們需要寫一個query() 函數去連接資料庫並執行查詢，傳回結果陣列。範例如下：
<?php
function query($query) {
$database = new PDO('mysql:host=localhost; dbname=database_name', 'database_user', 'database_password');
$database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $database->prepare($query);
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>實作搜尋框提示框邏輯的程式碼如下：
<?php
$keyword = $_GET['keyword'];
if ($keyword) {
$result = query("SELECT name FROM products WHERE name LIKE '%$keyword%' LIMIT 5");
$data = array();
foreach ($result as $row) {
$data[] = $row['name'];
}
echo json_encode($data);
}
?>以上程式碼執行如下操作：
從GET 請求中取得搜尋關鍵字。
查詢資料庫中與關鍵字相符的前 5 個商品名稱，並將結果儲存在 $data 陣列中。
將資料編碼成 JSON 格式並傳回給客戶端。
編寫客戶端程式碼
實作搜尋框提示方塊顯示的客戶端程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP 搜索框提示框实例</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="search-box" placeholder="请输入搜索关键字">
<div id="search-result"></div>
<script>
$(document).ready(function() {
$('#search-box').keyup(function() {
var keyword = $(this).val();
$.ajax({
url: 'search.php',
type: 'GET',
dataType: 'json',
data: {keyword: keyword},
success: function(data) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<div>' + data[i] + '</div>';
}
$('#search-result').html(html);
},
error: function() {
$('#search-result').html('无法获取数据！');
}
});
});
});
</script>
</body>
</html>以上程式碼執行如下操作：
監聽搜尋框輸入事件。
取得搜尋框輸入關鍵字並傳送 AJAX 請求到 search.php。
顯示 AJAX 傳回的資料在搜尋提示框中。
三、總結
透過上述步驟，我們成功實作了一個搜尋框提示框功能。使用者在搜尋框中輸入關鍵字，網頁透過AJAX 技術將關鍵字發送到伺服器端，伺服器根據關鍵字查詢資料庫並返回匹配結果給網頁，最後將結果以搜尋提示框形式展現在搜尋框下邊，實現了優秀的用戶搜尋體驗。這具體的實作方法我們可以根據實際需求進行彈性修改，以達到最佳的效果。
以上是如何用php實作一個搜尋提示框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
