使用 PHP 和 Ajax 構(gòu)建自動(dòng)完成建議引擎：服務(wù)器端腳本：處理 Ajax 請(qǐng)求并返回建議 (autocomplete.php)?？蛻舳四_本：發(fā)送 Ajax 請(qǐng)求并顯示建議 (autocomplete.js)。實(shí)戰(zhàn)案例：在 HTML 頁面中包含腳本并指定 search-input 元素標(biāo)識(shí)符。

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

引言

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

服務(wù)器端腳本

首先，我們需要一個(gè) PHP 腳本來處理 Ajax 請(qǐng)求并返回建議。創(chuàng)建一個(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 請(qǐng)求并顯示建議。創(chuàng)建一個(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 請(qǐng)求
        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 元素添加標(biāo)識(shí)符。在 autocomplete.php 腳本中，你需要將數(shù)據(jù)庫連接參數(shù)更改為與你的數(shù)據(jù)庫設(shè)置匹配。

運(yùn)行引擎

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

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