如何利用mysqli_result 實現後端搜索建議接口

M66 2025-05-28

在現代的網頁開發中，搜索功能是一個非常重要的組件。為了提高用戶體驗，很多網站在搜索框下方都會顯示一些搜索建議，幫助用戶更快速地找到他們想要的信息。這篇文章將通過一個簡單的例子，展示如何使用PHP 和mysqli_result函數實現一個後端搜索建議接口功能。

1. 數據庫連接

首先，我們需要連接到數據庫。以下是用PHP 的mysqli擴展來進行連接的代碼：

 <?php
$host = "localhost";
$username = "root";
$password = "yourpassword";
$database = "yourdatabase";

$conn = new mysqli($host, $username, $password, $database);

// 檢查連接
if ($conn->connect_error) {
    die("連接失敗: " . $conn->connect_error);
}
?>

這段代碼會連接到數據庫服務器，並選擇一個數據庫來執行後續的查詢。

2. 創建搜索建議接口

我們將創建一個簡單的搜索建議接口，允許用戶輸入關鍵字，後端返回符合條件的建議列表。以下是實現這個功能的代碼：

 <?php
// 獲取用戶輸入的關鍵字
$keyword = isset($_GET['query']) ? $_GET['query'] : '';

// 防止 SQL 注入
$keyword = $conn->real_escape_string($keyword);

// 定義查詢 SQL 語句
$sql = "SELECT * FROM products WHERE name LIKE '%$keyword%' LIMIT 5";

// 執行查詢
$result = $conn->query($sql);

// 判斷查詢是否成功
if ($result->num_rows > 0) {
    $suggestions = [];
    while ($row = $result->fetch_assoc()) {
        $suggestions[] = $row['name'];
    }
    echo json_encode($suggestions); // 返回搜索建議列表
} else {
    echo json_encode([]); // 如果沒有匹配的結果，返回空數組
}

$conn->close();
?>

在上面的代碼中，首先通過$_GET['query']獲取用戶輸入的查詢字符串，然後使用real_escape_string()方法來避免SQL 注入攻擊。接著，我們用SQL 語句查詢數據庫中products表中name字段與用戶輸入的關鍵字相匹配的記錄，最多返回5 條建議。

mysqli_result對象通過fetch_assoc()方法取出每一行的結果，並存入一個數組$suggestions中。最後，將這個數組轉成JSON 格式並輸出，前端可以通過AJAX 接收並顯示搜索建議。

3. 前端代碼

為了讓這個後端接口與前端頁面配合工作，我們需要在前端使用JavaScript 通過AJAX 向後端發送請求並接收返回的數據。以下是一個簡單的前端代碼示例：

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索建議示例</title>
    <style>
        #suggestions {
            border: 1px solid #ccc;
            max-height: 200px;
            overflow-y: auto;
        }
        .suggestion-item {
            padding: 8px;
            cursor: pointer;
        }
        .suggestion-item:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <input type="text" id="search" placeholder="輸入搜索關鍵詞..." oninput="getSuggestions()">
    <div id="suggestions"></div>

    <script>
        function getSuggestions() {
            var query = document.getElementById('search').value;
            if (query.length > 0) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'search_suggestions.php?query=' + query, true);
                xhr.onload = function() {
                    if (xhr.status == 200) {
                        var suggestions = JSON.parse(xhr.responseText);
                        displaySuggestions(suggestions);
                    }
                }
                xhr.send();
            } else {
                document.getElementById('suggestions').innerHTML = '';
            }
        }

        function displaySuggestions(suggestions) {
            var suggestionsDiv = document.getElementById('suggestions');
            suggestionsDiv.innerHTML = '';
            suggestions.forEach(function(item) {
                var div = document.createElement('div');
                div.classList.add('suggestion-item');
                div.textContent = item;
                suggestionsDiv.appendChild(div);
            });
        }
    </script>
</body>
</html>

在這段前端代碼中，我們在輸入框中使用了oninput事件，當用戶輸入字符時，會調用getSuggestions()函數，通過AJAX 向search_suggestions.php發送請求並獲取搜索建議。返回的建議會通過displaySuggestions()函數展示在頁面上。

4. 總結

通過PHP 和MySQL，結合mysqli_result函數，我們成功實現了一個簡單的後端搜索建議接口功能。用戶輸入關鍵詞時，後端會根據數據庫中的數據返回相關建議，而前端則通過AJAX 動態顯示這些建議。這個例子展示瞭如何利用mysqli_result來高效地從數據庫中獲取數據並將其返回給前端。