Autocomplete选择项无法触发其他输入框自动填充的问题求助

问题根源 #

当前点击自动补全列表的<li>元素时，仅设置了user_id输入框的值，但onchange事件只有在输入框失去焦点且值发生改变时才会触发，因此不会自动调用GetDetail()函数去获取并填充姓名字段。

解决方案1：点击列表项后手动触发数据获取 #

修改jQuery中点击<li>的事件处理逻辑，在设置user_id值后，直接调用GetDetail()函数，复用现有数据获取逻辑：

$(document).on('click', 'li', function() {
    const selectedUserId = $(this).text();
    $('#user_id').val(selectedUserId);
    $('#countryList').fadeOut();
    // 手动调用GetDetail填充姓名字段
    GetDetail(selectedUserId);
});

这样点击列表项后，会立即触发姓名字段的自动填充，和手动输入UserID后的行为完全一致。

解决方案2：优化列表项携带数据，减少重复请求（推荐） #

如果希望避免重复发起AJAX请求，可以让生成自动补全列表的searchCountry.php返回的<li>元素携带用户的姓名数据，点击时直接读取填充：

步骤1：修改searchCountry.php的列表生成逻辑 #

调整查询和输出逻辑，给每个<li>添加data-firstname和data-lastname属性，存储对应用户的姓名信息：

// searchCountry.php核心逻辑示例（需结合实际查询调整）
$query = mysqli_query($con, "SELECT user_id, first_name, last_name FROM userdata WHERE user_id LIKE '%{$_POST['query']}%'");
while($row = mysqli_fetch_array($query)){
    echo "<li data-firstname='{$row['first_name']}' data-lastname='{$row['last_name']}'>{$row['user_id']}</li>";
}

步骤2：修改前端点击事件 #

直接从<li>的data属性中读取姓名并填充，无需再次发起AJAX请求：

$(document).on('click', 'li', function() {
    const selectedUserId = $(this).text();
    // 从data属性直接获取姓名数据
    const firstName = $(this).data('firstname');
    const lastName = $(this).data('lastname');
    
    $('#user_id').val(selectedUserId);
    $('#first_name').val(firstName);
    $('#last_name').val(lastName);
    $('#countryList').fadeOut();
});

重要安全提醒 #

当前后端代码存在SQL注入风险，直接将用户输入拼接到SQL语句中极易被攻击。请修改gfg.php和searchCountry.php，使用MySQLi预处理语句：

// gfg.php安全写法示例
$user_id = $_REQUEST['user_id'];
$con = mysqli_connect("localhost", "root", "", "gfg");

// 使用预处理语句防止SQL注入
$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();
$row = $result->fetch_assoc();

$result = [$row['first_name'], $row['last_name']];
echo json_encode($result);

// 关闭语句和连接
$stmt->close();
$con->close();

内容的提问来源于stack exchange，提问作者Moon