PHP AJAX 自動完成建議實作教學

功能概述

使用者在輸入框鍵入姓名時，前端即時送出 AJAX 請求，後端從陣列中搜尋符合前綴的姓名並回傳建議列表。示範基本的自動完成/搜尋建議功能。

前端頁面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX 自動完成建議</title>
<script>
function showHint(str) {
    const box = document.getElementById('txtHint');
    if (!str) {
        box.innerHTML = '';
        return;
    }
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            box.innerHTML = xhr.responseText;
        }
    };
    xhr.open('GET', 'gethint.php?q=' + encodeURIComponent(str), true);
    xhr.send();
}
</script>
</head>
<body>
<p><b>在輸入框中輸入一個姓名:</b></p>
<form>
    姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" size="20">
</form>
<p>返回值: <span id="txtHint"></span></p>
</body>
</html>

後端 PHP (gethint.php)

<?php
$names = [
    'Anna', 'Brittany', 'Cinderella', 'Diana', 'Eva', 'Fiona', 'Gunda', 'Hege',
    'Inga', 'Johanna', 'Kitty', 'Linda', 'Nina', 'Ophelia', 'Petunia', 'Amanda',
    'Raquel', 'Cindy', 'Doris', 'Eve', 'Evita', 'Sunniva', 'Tove', 'Unni',
    'Violet', 'Liza', 'Elizabeth', 'Ellen', 'Wenche', 'Vicky'
];

$q = isset($_GET['q']) ? $_GET['q'] : '';
if (!$q) {
    exit('no suggestion');
}

$hint = '';
$len = strlen($q);
foreach ($names as $name) {
    if (strcasecmp(substr($name, 0, $len), $q) === 0) {
        $hint .= ($hint ? ', ' : '') . $name;
    }
}

echo $hint ?: 'no suggestion';
?>

關鍵流程說明

1. onkeyup 觸發 showHint()，傳送目前輸入字串。
2. PHP 遍歷姓名陣列，使用 strcasecmp() + substr() 比對前綴 (不分大小寫)。
3. 符合項目以逗號串接回傳。
4. 前端直接顯示於 #txtHint。

跨域請求 (CORS) 解決方案

若前端頁面與 API 域名不同，需在 PHP 設定 CORS 標頭：

<?php
header('Access-Control-Allow-Origin: *'); // 或指定具體域名
header('Access-Control-Allow-Methods: GET, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0);
}
// 其餘邏輯...
?>

改進與擴充建議

• 資料來源遷移： 陣列改為資料庫查詢 (SELECT name FROM users WHERE name LIKE ? LIMIT 10) 或搜尋引擎。
• 去抖動： 前端加入 200-300ms 延遲，避免過度請求。
• 快取： 熱門前綴結果快取 (Redis/APCu)。
• 回傳 JSON： 結構化回傳 {suggestions: ['Anna','Amanda']}，前端自行渲染下拉選單 (支援鍵盤導航、高亮)。
• 最小字元限制： 輸入長度 < 2 不發請求。
• 現代化前端： 使用 fetch() + AbortController 取消舊請求，搭配 Alpine.js/Vue/React 元件化。
• 無障礙： 加入 role="combobox"、aria-autocomplete="list" 等 ARIA 屬性。