求助：实现搜索联想点击后自动填充多HTML表单字段

1. 调整HTML表单（search.php） #

给「City, State」输入框添加id，方便jQuery选中填充；同时移除页面中重复的id="display"元素（避免DOM选择冲突）：

<div>
  <label for="CityState_textbox"></label>
  <input type="text" id="cityState" name="CityState" placeholder="City, State">
</div>

2. 修改ajax.php：传递完整客户数据 #

更新查询语句获取所有需要的字段，并用JSON格式传递完整客户信息给前端（避免分隔符冲突）：

<?php
include "db.php";
if (isset($_POST['search'])) {
    $Name = $_POST['search'];
    // 查询所有需要填充的字段（根据数据库实际字段名调整）
    $Query = "SELECT Name, Address, CityState, Zip_textbox, CellPhone_textbox, SecondaryPhone_textbox FROM customers WHERE Name LIKE '%$Name%' LIMIT 50";
    $ExecQuery = MySQLi_query($con, $Query);
    echo '<ul>';
    while ($Result = MySQLi_fetch_assoc($ExecQuery)) {
        // 将客户数据转为JSON字符串，传递给fill函数
        $customerJson = json_encode($Result);
        ?>
        <li onclick='fill(<?php echo $customerJson; ?>)'>
            <a>
                <?php echo $Result['Name']; ?>, <?php echo $Result['Address']; ?>, <?php echo $Result['CityState']; ?>
            </a>
        </li>
        <?php
    }
    echo '</ul>';
}
?>

注意：原代码存在SQL注入风险，建议替换为预处理语句：

$Query = "SELECT Name, Address, CityState, Zip_textbox, CellPhone_textbox, SecondaryPhone_textbox FROM customers WHERE Name LIKE ? LIMIT 50";
$stmt = mysqli_prepare($con, $Query);
$searchParam = "%$Name%";
mysqli_stmt_bind_param($stmt, "s", $searchParam);
mysqli_stmt_execute($stmt);
$ExecQuery = mysqli_stmt_get_result($stmt);

3. 修改script.js：实现多字段填充 #

更新fill函数，接收完整客户数据对象，批量填充对应表单字段：

// 接收完整客户数据对象，填充所有非复选框字段
function fill(customer) {
    $('#search').val(customer.Name);
    $('#address').val(customer.Address);
    $('#cityState').val(customer.CityState);
    $('input[name="Zip_textbox"]').val(customer.Zip_textbox);
    $('input[name="CellPhone_textbox"]').val(customer.CellPhone_textbox);
    $('input[name="SecondaryPhone_textbox"]').val(customer.SecondaryPhone_textbox);
    // 隐藏搜索结果面板
    $('#display').hide();
}

$(document).ready(function() {
    $("#search").keyup(function() {
        var name = $('#search').val();
        if (name == "") {
            $("#display").html("");
        } else {
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: {
                    search: name
                },
                success: function(html) {
                    $("#display").html(html).show();
                }
            });
        }
    });
});

效果说明 #

点击搜索结果中的任意一项，表单内的姓名、地址、城市州、邮编、手机号等字段会自动填充，复选框保留原有逻辑。

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