如何用JQuery克隆表单并自动添加Autocomplete及关联ID输入框

这是一个带表单克隆功能的HTML页面：

• 初始表单包含只读的ID输入框和名称输入框，输入API返回列表中存在的名称时，ID框会自动填充对应ID
• 点击「新增一筆資料」按钮可克隆表单并修改元素ID

现有代码仅对初始表单生效，存在两个问题：

1. 克隆生成的名称输入框无法启用Autocomplete功能
2. 仅初始表单的名称输入能触发ID自动填充，克隆后的表单无此联动效果

问题1：修复克隆输入框的Autocomplete设置 #

现有代码中修改克隆后名称框ID时，错误添加了#前缀，导致选择器无法找到元素。修正ID设置逻辑后，调用link_autocomplete_data即可为新输入框启用自动补全。

问题2：实现所有输入框的ID自动填充 #

1. 优化数据结构：提前构建「名称→ID/库存」的映射对象，避免每次输入都遍历整个数据集，提升效率
2. 使用事件委托：绑定事件到父容器，监听所有动态生成的名称输入框的change/autocompleteselect事件，确保克隆后的表单也能触发联动

<body>
<form>
    <div class="row" id="general_form">
        <div class="col-2">
            <label for="Rent_form_g_ID" class="form-label">id of name</label>
            <input type="text" class="form-control" id="Rent_form_g_ID" value="" disabled readonly>
        </div>
        <div class="col-2">
            <label for="Rent_form_g_name" class="form-label">name</label>
            <input type="text" class="form-control" placeholder="enter the name" id="Rent_form_g_name">
        </div>
        <div class="col-2">
            <button type="button" class="btn btn-primary btn-block" onclick="delete_data(this)">delete</button>
        </div>
        <br>
    </div>
</form>
<div class="row">
    <hr>
    <button type="button" class="btn btn-primary btn-block" onclick="append_a_data()">新增一筆資料</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
    var general_data = {};
    var general_name = [];
    // 新增：构建名称到数据的映射表
    var nameToDataMap = {};

    // 获取API数据
    var url = 'https://ap3.ragic.com/haisann/forms2/1?api=true';
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", url, false);
    xmlHttp.send(null);
    general_data = JSON.parse(xmlHttp.responseText);
    
    // 初始化数据列表和映射表
    for(var i in general_data){
        var item = general_data[i];
        general_name.push(item["財產名稱"]);
        nameToDataMap[item["財產名稱"]] = {
            id: item["財產編號"],
            stock: item["財產數量"]
        };
    };
    console.log("get general data successfully");

    function link_autocomplete_data($id){
        $('#'+$id).autocomplete({
            source: general_name
        });
    }

    var cloneCount = 1;
    function append_a_data(){
        var $html = $('#general_form').clone().attr('id', 'general_form' + cloneCount).insertAfter($('[id^=general_form]:last'));
        // 修正：移除ID中的#前缀
        $('#general_form' + cloneCount).find('#Rent_form_g_ID').attr('id','Rent_form_g_ID' + cloneCount);
        $('#general_form' + cloneCount).find('#Rent_form_g_name').attr('id','Rent_form_g_name' + cloneCount);
        // 修正：传入正确的ID
        link_autocomplete_data('Rent_form_g_name' + cloneCount);
        cloneCount++;
    };

    function delete_data($el){
        // 简化删除逻辑，直接通过元素查找父容器
        $el.closest('.row').remove();
    };

    $(document).ready(function(){
        link_autocomplete_data("Rent_form_g_name");

        // 事件委托：监听所有名称输入框的事件
        $('form').on('change autocompleteselect', '[id^=Rent_form_g_name]', function() {
            var $input = $(this);
            var g_name = $input.val();
            // 通过映射表快速获取数据
            var data = nameToDataMap[g_name];
            if(data){
                // 找到当前行对应的ID输入框
                var $idInput = $input.closest('.row').find('[id^=Rent_form_g_ID]');
                $idInput.val(data.id);
                // 如果有库存输入框，同理填充（注意原代码中此输入框未在HTML中定义，需自行添加）
                // var $stockInput = $input.closest('.row').find('[id^=Rent_form_g_stock]');
                // $stockInput.val(data.stock);
            }
        });
    })
</script>
</body>

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