如何实现点击自动补全选项后联动填充其他表单字段_技术教程

本文详解如何在用户从 autocomplete 下拉列表中选择 user id 后，自动触发并填充对应的 first name 和 last name 字段，解决 `onchange` 不触发、`keyup` 无法覆盖点击选中场景的核心问题。

在基于 AJAX 的自动补全（autocomplete）表单中，一个常见需求是：当用户通过键盘输入 User ID 时，实时查询并填充关联的姓名字段；但更关键的是——当用户点击下拉列表中的某项完成选择后，也必须同步触发姓名填充逻辑。原始代码中仅依赖 onchange 或 keyup 事件，而点击

选项时仅修改了输入框值，并未主动调用数据获取函数，导致 GetDetail() 未执行，从而“ autofill 失效”。

✅ 根本原因与修复思路

onchange 仅在输入框失焦且值改变时触发 → 点击列表后未失焦，不触发；
keyup 仅响应键盘输入 → 点击选择不产生按键事件；
正确方案：统一使用 oninput 事件 —— 它在值任何方式变更时（包括 JS 赋值、粘贴、点击选择）均触发，完美覆盖所有场景。

✅ 关键修复步骤

为 #user_id 添加 oninput 属性，确保值变更即调用 GetDetail()：

更新 GetDetail() 函数以兼容 JSON 结构化响应
原 PHP 返回的是索引数组 ["John", "Doe"]，但前端代码却按对象属性 myObj.first_name 访问 —— 这要求后端返回格式必须匹配。因此需同步调整 PHP 侧（推荐方式），或前端适配。本文采用前后端协同优化：

✅ 推荐 PHP 返回结构化 JSON（更健壮、可扩展）：

// gfg.php
$user_id = $_GET['user_id'] ?? '';
$con = mysqli_connect("localhost", "root", "", "gfg");

if (!empty($user_id)) {
    $stmt = $con->prepare("SELECT first_name, last_name FROM userdata WHERE user_id = ?");
    $stmt->bind_param("s", $user_id);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($row = $result->fetch_assoc()) {
        echo json_encode($row); // → {"first_name":"John","last_name":"Doe"}
    } else {
        echo json_encode(['first_name' => '', 'last_name' => '']);
    }
} else {
    echo json_encode(['first_name' => '', 'last_name' => '']);
}

✅ 前端 GetDetail() 保持对象访问（简洁清晰）：

function GetDetail(str) {
    if (str.trim() === "") {
        document.getElementById("first_name").value = "";
        document.getElementById("last_name").value = "";
        return;
    }

    const xhr = new XMLHttpRequest();
    xhr.open("GET", "gfg.php?user_id=" + encodeURIComponent(str), true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                try {
                    const data = JSON.parse(xhr.responseText);
                    document.getElementById("first_name").value = data.first_name || "";
                    document.getElementById("last_name").value = data.last_name || "";
                } catch (e) {
                    console.error("Invalid JSON response:", e);
                }
            } else {
                console.warn("AJAX request failed:", xhr.status);
            }
        }
    };
    xhr.send();
}

确保点击列表项后触发 oninput
原 jQuery 点击逻辑仅设置值，但不会触发 oninput（部分旧浏览器需手动 dispatch）：

$(document).on('click', 'li', function() {
    const selectedText = $(this).text();
    $('#user_id').val(selectedText).trigger('input'); // ? 关键：显式触发 input 事件
    $('#countryList').fadeOut();
});