溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用php實現一個搜索提示框”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用php實現一個搜索提示框”吧!
一、實現原理
在 PHP 實現搜索提示框的過程中，我們需要用到 AJAX 技術。主要分為以下幾個步驟：
用戶在搜索框中輸入搜索關鍵字。
把關鍵字發送給服務器端的 PHP 腳本。
在服務器端，通過查詢數據庫或其他數據源，獲取與關鍵字相關的搜索結果。
將搜索結果封裝成 JSON 數據格式并返回給客戶端。
客戶端收到服務器返回的數據后，使用 JavaScript 將其展現在搜索框下方，形成搜索提示框。
二、實現步驟
建立數據庫表
我們先建立一個名為 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 返回的數據在搜索提示框中。
到此，相信大家對“怎么用php實現一個搜索提示框”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
