jQuery UI Autocomplete仅在表格首行生效的问题求助

问题根因 #

• jQuery ID选择器只会匹配页面上第一个符合条件的元素，你所有行的商品搜索输入框都用了重复的id="itemSearch"，页面加载时初始化autocomplete仅绑定到了首行的输入框
• 动态新增的行是初始化autocomplete之后才生成的DOM元素，默认不会继承已有的autocomplete绑定逻辑

修复步骤 #

1. 封装autocomplete初始化逻辑 #

将autocomplete的配置封装为可复用的函数，支持针对指定元素初始化：

// 通用自动补全初始化函数
function initAutocomplete(target = '.select-product') {
    $(target).autocomplete({
        source: "{{ route('autoCompSearch') }}",
        minLength: 3,
        select: function(key, value){
            console.log(key, value);
        }
    });
}

// 页面加载完成后初始化首行已存在的输入框
$(document).ready(function(){
    initAutocomplete();
});

2. 新增行后触发新元素的autocomplete绑定 #

修改dynamic_field函数，插入新行后单独给当前新增行的搜索输入框初始化autocomplete，同时修正重复ID问题：

function dynamic_field(number)
{
    var html = '';
    html += '<tr class="options" name="line_items">'
    html += '<td width="5%"><input type="text" name="id[]" class="form-control" value="" disabled></td>'
    html += '<td width="15%"><input type="text" name="barcode_id[]" class="form-control barcode-search"></td>'
    // 移除重复id，仅保留class标识
    html += '<td width="30%"><input type="text" name="item_id[]" class="form-control select-product"></td>'
    html += '<td width="5%"><input type="text" name="qty[]" value="1" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
    // 其余字段移除重复id，可按需拼接行号生成唯一id
    html += '<td width="10%"><input type="text" name="sal_price[]" class="form-control calc" onkeyup="InvoiceCalculation()" value="1"></td>'
    html += '<td width="5%"><input type="text" name="discPer[]" class="form-control" value="0" placeholder="Discount percentage..." onkeyup="InvoiceCalculation()"></td>'
    html += '<td width="15%"><input type="text" name="totUnitAmount[]" class="form-control form-control-sm" value="0"></td>'
    // 按钮替换为class标识，避免id重复
    html += '<td><input type="button" class="form-control btn btn-success addRow" name="addRow[]" value="+"></td>'
    html += '<td><input type="button" class="form-control btn btn-danger removeRow" name="removeRow[]" value="-"></td>';
    html += '</tr>';

    $('#journalRows').append(html);
    // 给刚插入的最后一行的搜索框初始化自动补全
    initAutocomplete($('#journalRows tr:last').find('.select-product'));
};

3. 修正按钮事件绑定的选择器 #

将原来的ID选择器改为class选择器，保证所有新增行的按钮都能触发事件：

$('#journalRows').on('keydown', '.addRow',function(event){
    count++;
    dynamic_field(count);
    return true;
});

额外注意 #

HTML规范要求页面内ID必须全局唯一，你原有代码中所有重复的ID都可能导致其他DOM操作异常，建议全部替换为class标识，或者拼接行号生成唯一ID。

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