如何用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 返回的資料在搜尋提示框中。

三、總結

通過以上步驟，我們成功實現了一個搜尋方塊提示框功能。使用者在搜尋方塊中輸入關鍵字，網頁通過 AJAX 技術將關鍵字傳送到伺服器端，伺服器根據關鍵字查詢資料庫並返回匹配結果給網頁，最後將結果以搜尋提示框形式展現在搜尋方塊下邊，實現了優秀的使用者搜尋體驗。這具體的實現方法我們可以根據實際需求進行靈活修改，以達到最佳的效果。

以上就是如何用php實現一個搜尋提示框的詳細內容，更多請關注TW511.COM其它相關文章！