使用 PHP 和 Ajax 建立自動(dòng)完成建議引擎：伺服器端腳本：處理 Ajax 請求並傳回建議 (autocomplete.php)?？蛻舳四_本：發(fā)送 Ajax 請求並顯示建議 (autocomplete.js)。實(shí)戰(zhàn)案例：在 HTML 頁面中包含腳本並指定 search-input 元素識別碼。

PHP 與Ajax：建立一個(gè)自動(dòng)完成建議引擎

自動(dòng)完成建議引擎是一個(gè)有用的工具，它可以幫助使用者在輸入欄位中找到建議。它通常用於搜尋欄、位址欄位和其他文字輸入?yún)^(qū)域。本文將指導(dǎo)你使用 PHP 和 Ajax 建立一個(gè)自動(dòng)完成建議引擎。

伺服器端腳本

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

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

// 連接到數(shù)據(jù)庫
$conn = new mysqli("localhost", "my_user", "my_password", "my_db");

// 準(zhǔn)備 SQL 查詢
$stmt = $conn->prepare("SELECT suggestion FROM suggestions WHERE suggestion LIKE ?");

// 綁定查詢參數(shù)
$stmt->bind_param("s", "%$query%");

// 執(zhí)行查詢
$stmt->execute();

// 獲取結(jié)果
$result = $stmt->get_result();

// 逐行讀取結(jié)果并將其轉(zhuǎn)換為 JSON
$suggestions = array();
while ($row = $result->fetch_assoc()) {
    $suggestions[] = $row['suggestion'];
}
$json = json_encode($suggestions);

// 返回 JSON 響應(yīng)
header("Content-Type: application/json");
echo $json;
?>

客戶端腳本

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

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

// 添加事件監(jiān)聽器以在按鍵盤鍵時(shí)觸發(fā)
searchInput.addEventListener("keyup", function(event) {
    // 獲取查詢字符串
    const query = searchInput.value;

    // 如果查詢字符串為空，則顯示建議
    if (query.length > 0) {
        // 創(chuàng)建 Ajax 請求
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "autocomplete.php?query=" + query, true);
        xhr.onload = function() {
            // 解析 JSON 響應(yīng)
            const suggestions = JSON.parse(xhr.responseText);

            // 顯示建議
            // ... (由你實(shí)現(xiàn))
        };
        xhr.send();
    }
});

實(shí)戰(zhàn)案例

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

執(zhí)行引擎

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

以上是PHP 與 Ajax：建立一個(gè)自動(dòng)完成建議引擎的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！