JQuery autocomplete() 仅适用于表的第一行

Question

自动完成 jQuery UI 仅适用于表格的第一行。 我正在使用 Bootstrap 上的 Autocomplete jQuery UI 开发药房搜索引擎表单，问题是自动完成功能仅适用于第一行。当我单击添加按钮时，它会创建一个新行，但在新行中它不起作用。

我的 jQuery 语法如下：

$("#itemSearch").autocomplete({
    source: "{{ route('autoCompSearch') }}",
    minLength:3,
    select: function(key, value){
        console.log(key, value);
    },
});

我的 addRow() 如下；

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

而我的 dynamic_filed(count) 函数是 as;

function dynamic_field(number)
{
    // New Function to add New Row in Journal
    var html = '';

    html += '<tr class="options" name="line_items">'
    html += '<td width="5%"><input type="text" id="checkbox. $user->id ." name="id[]" class="form-control" value="" disabled=""></td>'
    html += '<td width="15%"><input type="text" name="barcode_id[]" id="barcodeSearch" class="form-control"></td>'
    html += '<td width="30%"><input type="text" name="item_id[]" id="itemSearch" class="form-control select-product"></td>'
    html += '<td width="5%"><input type="text" name="qty[]" value="1" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
    html += '<td width="10%"><input type="text" id="sal_price" value="1" name="sal_price[]" class="form-control calc" onkeyup="InvoiceCalculation()"></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" id="totUnitAmount" name="totUnitAmount[]" class="form-control form-control-sm" value="0"></td>'
    html += '<td><input type="button" id="addRow" name="addRow[]" class="form-control btn btn-success" value="+"></td>'
    html += '<td><input type="button" id="removeRow" name="removeRow[]" class="form-control btn btn-danger" value="-"></td>';
    html += '</tr>';

    $('#journalRows').append(html);
};

这是可行的，但只有自动完成选项在第二行及以后的行中不起作用.....

Answer 1

对于新行，您需要更改自动完成字段的 ID。每个自动完成字段都应该有一个唯一的 id：

$("#itemSearch").autocomplete({
    source: "{{ route('autoCompSearch') }}",
    minLength:3,
    select: function(key, value){
        console.log(key, value);
    },
});

$("#itemSearch1").autocomplete({
    source: "{{ route('autoCompSearch') }}",
    minLength:3,
    select: function(key, value){
        console.log(key, value);
    },
});

还需要在字段创建后初始化自动完成模块，否则它不会在 DOM 中，jQuery 将无法用于字段

更新：

如下更改您的 dynamic_field 函数：

function dynamic_field(number)
{
    // New Function to add New Row in Journal
    var html = '';

    html += '<tr class="options" name="line_items">'
    html += '<td width="5%"><input type="text" id="checkbox. $user->id ." name="id[]" class="form-control" value="" disabled=""></td>'
    html += '<td width="15%"><input type="text" name="barcode_id[]" id="barcodeSearch" class="form-control"></td>'
    html += '<td width="30%"><input type="text" name="item_id[]" id="itemSearch-'+number+'" class="form-control select-product"></td>'
    html += '<td width="5%"><input type="text" name="qty[]" value="1" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
    html += '<td width="10%"><input type="text" id="sal_price" value="1" name="sal_price[]" class="form-control calc" onkeyup="InvoiceCalculation()"></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" id="totUnitAmount" name="totUnitAmount[]" class="form-control form-control-sm" value="0"></td>'
    html += '<td><input type="button" id="addRow" name="addRow[]" class="form-control btn btn-success" value="+"></td>'
    html += '<td><input type="button" id="removeRow" name="removeRow[]" class="form-control btn btn-danger" value="-"></td>';
    html += '</tr>';

    $('#journalRows').append(html);
    $("#itemSearch-"+number).autocomplete({
          source: "{{ route('autoCompSearch') }}",
          minLength:3,
          select: function(key, value){
             console.log(key, value);
          },
    });
};