基于PHP、MySQL、jQuery实现多输入框自动补全关联数值的问题

问题根源 #

你的代码存在两个核心问题：

1. 后端返回的编程语言名称和编号是两个独立数组，前端无法精准对应每组数据
2. 前端自动补全的select事件逻辑错误，将选中的语言名称赋值给了编号输入框，而非对应的编号值

分步修复方案 #

1. 调整后端接口（pl.php） #

修改接口返回格式，将编程语言名称和编号封装为对象数组，确保每组数据的关联性：

<?php
require_once 'dbcontroller.php';
$conn = new DBController();

// 查询时同时获取名称和编号
$query = "SELECT pl_name, pl_id FROM pl";
$result = $conn->runQuery($query);

$tagList = [];
foreach ($result as $row) {
    $tagList[] = [
        'name' => $row['pl_name'],
        'id' => $row['pl_id']
    ];
}

echo json_encode($tagList);
?>

2. 修复前端自动补全逻辑（index.html） #

更新JS代码，处理对象数组格式的数据源，并在选中语言时将对应编号填充到同组的输入框中：

<!DOCTYPE html>
<html>
<head>
    <title>多行自动补全示例</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
    <div id="input-container">
        <div class="input-row">
            <input type="text" class="pl-input" placeholder="编程语言">
            <input type="text" class="pl-id-input" placeholder="编号" readonly>
            <button class="remove-row">删除</button>
        </div>
    </div>
    <button id="add-row">添加行</button>

    <script>
        $(document).ready(function() {
            initAutocomplete();

            // 添加新行
            $('#add-row').click(function() {
                const newRow = `
                    <div class="input-row">
                        <input type="text" class="pl-input" placeholder="编程语言">
                        <input type="text" class="pl-id-input" placeholder="编号" readonly>
                        <button class="remove-row">删除</button>
                    </div>
                `;
                $('#input-container').append(newRow);
                initAutocomplete();
                bindRemoveEvent();
            });

            bindRemoveEvent();
        });

        // 初始化自动补全
        function initAutocomplete() {
            // 只给未初始化过的输入框绑定事件
            $('.pl-input:not(.ui-autocomplete-input)').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: 'pl.php',
                        dataType: 'json',
                        data: { term: request.term },
                        success: function(data) {
                            response($.map(data, function(item) {
                                return {
                                    label: item.name, // 下拉显示的名称
                                    value: item.name, // 输入框填充的名称
                                    id: item.id       // 关联的编号
                                };
                            }));
                        }
                    });
                },
                select: function(event, ui) {
                    // 找到当前输入框所在行的编号输入框，填充编号
                    $(this).siblings('.pl-id-input').val(ui.item.id);
                }
            });
        }

        // 绑定删除行事件
        function bindRemoveEvent() {
            $('.remove-row').off('click').click(function() {
                $(this).parent().remove();
            });
        }
    </script>
</body>
</html>

3. 验证关键环节 #

• 确认dbcontroller.php的数据库连接配置正确，能正常查询pl表
• 访问pl.php直接查看返回的JSON格式是否为[{"name":"Python","id":"1"},...]
• 测试新增行的自动补全功能，选中语言后检查编号输入框是否正确填充对应值

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