如何使用jQuery-ui Autocomplete填充双输入框？MySQL/PHP输出格式问题求助

这种情况我之前做项目的时候也踩过坑，大概率是你在PHP返回数据的格式或者前端赋值环节出了问题，咱们一步步排查：

1. 先检查PHP端的JSON输出结构 #

jQuery UI Autocomplete的source接受的对象数组，每个对象需要包含清晰区分的键值对，如果你不小心给两个字段用了同一个键，就会出现覆盖导致两个输入框拿到相同值。

错误示例（重复键导致覆盖） #

// 这里cs1被重复赋值，最终只会保留最后一个值
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = [
        'label' => $row['product_name'],
        'cs1' => $row['sku'],
        'cs1' => $row['price'] // 前面的cs1会被这个覆盖
    ];
}
echo json_encode($data);

正确写法（区分两个字段键） #

// 给两个字段分别定义不同的键，比如cs1和cs2
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = [
        'label' => $row['product_name'], // autocomplete下拉显示的文本
        'value' => $row['product_name'], // 选中后填充到主搜索框的值（可选）
        'cs1' => $row['sku'],            // 第一个输入框需要的值
        'cs2' => $row['price']           // 第二个输入框需要的值
    ];
}
// 记得设置正确的响应头，避免JSON解析问题
header('Content-Type: application/json');
echo json_encode($data);

2. 检查前端select事件的赋值逻辑 #

即使后端返回了正确的结构，前端如果选错了键，也会导致两个输入框拿到相同值：

错误示例（赋值时用了同一个键） #

$("#searchInput").autocomplete({
    source: "fetch-data.php",
    select: function(event, ui) {
        $("#input1").val(ui.item.cs1);
        $("#input2").val(ui.item.cs1); // 这里应该用ui.item.cs2
    }
});

正确写法（对应不同的键） #

$("#searchInput").autocomplete({
    source: "fetch-data.php",
    select: function(event, ui) {
        event.preventDefault(); // 可选，防止默认把value填充到搜索框
        $("#searchInput").val(ui.item.label);
        $("#input1").val(ui.item.cs1);
        $("#input2").val(ui.item.cs2);
    }
});

3. 排查MySQL查询的字段别名 #

如果你的查询里给两个字段起了相同的别名，PHP拿到的结果数组里就会只有一个值（后面的覆盖前面的）：

错误示例（重复别名） #

SELECT product_sku AS cs1, product_price AS cs1 FROM products WHERE ...

正确写法（不同别名） #

SELECT product_sku AS cs1, product_price AS cs2 FROM products WHERE ...

如果上面的排查都没解决问题，可以把你的完整PHP/MySQL代码贴出来，我帮你再细查~

内容的提问来源于stack exchange，提问作者Keith D Kaiser