PHP 與 Ajax：建立一個自動完成建議引擎

使用 PHP 和 Ajax 建立自動完成建議引擎：伺服器端腳本：處理 Ajax 請求並傳回建議 (autocomplete.php)。客戶端腳本：發送 Ajax 請求並顯示建議 (autocomplete.js)。實戰案例：在 HTML 頁面中包含腳本並指定 search-input 元素識別碼。

PHP 與Ajax：建立一個自動完成建議引擎

自動完成建議引擎是一個有用的工具，它可以幫助使用者在輸入欄位中找到建議。它通常用於搜尋欄、位址欄位和其他文字輸入區域。本文將指導你使用 PHP 和 Ajax 建立一個自動完成建議引擎。

伺服器端腳本

首先，我們需要一個 PHP 腳本來處理 Ajax 請求並傳回建議。建立一個名為autocomplete.php 的檔案並新增以下程式碼：

<?php
// 获取查询字符串
$query = $_GET['query'];

// 连接到数据库
$conn = new mysqli("localhost", "my_user", "my_password", "my_db");

// 准备 SQL 查询
$stmt = $conn->prepare("SELECT suggestion FROM suggestions WHERE suggestion LIKE ?");

// 绑定查询参数
$stmt->bind_param("s", "%$query%");

// 执行查询
$stmt->execute();

// 获取结果
$result = $stmt->get_result();

// 逐行读取结果并将其转换为 JSON
$suggestions = array();
while ($row = $result->fetch_assoc()) {
    $suggestions[] = $row['suggestion'];
}
$json = json_encode($suggestions);

// 返回 JSON 响应
header("Content-Type: application/json");
echo $json;
?>

客戶端腳本

接下來，我們需要一個客戶端腳本來發送Ajax 請求並顯示建議。建立一個名為autocomplete.js 的檔案並新增以下程式碼：

// 获取搜索输入元素
const searchInput = document.getElementById("search-input");

// 添加事件监听器以在按键盘键时触发
searchInput.addEventListener("keyup", function(event) {
    // 获取查询字符串
    const query = searchInput.value;

    // 如果查询字符串为空，则显示建议
    if (query.length > 0) {
        // 创建 Ajax 请求
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "autocomplete.php?query=" + query, true);
        xhr.onload = function() {
            // 解析 JSON 响应
            const suggestions = JSON.parse(xhr.responseText);

            // 显示建议
            // ... (由你实现)
        };
        xhr.send();
    }
});

實戰案例

為了使用自動完成建議引擎，你可以在HTML 頁面中包含上述腳本檔案並為search-input 元素新增識別碼。在 autocomplete.php 腳本中，你需要將資料庫連線參數變更為與你的資料庫設定相符。

執行引擎

將 autocomplete.php 和 autocomplete.js 檔案上傳到你的伺服器。造訪包含 search-input 元素的 HTML 頁面，並開始輸入一個查詢字串。你應該會看到匹配查詢的建議。

以上是PHP 與 Ajax：建立一個自動完成建議引擎的詳細內容。更多資訊請關注PHP中文網其他相關文章！