具有相同名称的多行输入的 jQuery UI 自动完成

Question

我现在已经为此工作了 3 天，到处寻找解决方案，但没有成功。

我有一个动态 HTML 表格，其中连续有 5 个输入。输入以数组约定命名（即 name=part_no[]、name=cost[] 等）。使用 jQuery，在初始行的末尾会显示一个按钮，允许用户添加新行。添加新行时，会创建另一个按钮以允许用户删除该行。这是表格和“添加行”按钮的代码：

<div class="row">
  <table id="part_numbers" class="table">
    <tbody>
      <tr>
        <td width="16.66%">
          <!--part number-->
          <label for="part_no[]" class="control-label">Part No</label>
          <input class="form-control part_no" type="text" name="part_no[]">
        </td>
        <td width="16.66%">
          <!--list price-->
          <label for="list_price[]" class="control-label">Suggested List Price</label>
          <span class="calc_prices" data-toggle="popover" title="Calculated Pricing" data-content="This is where the data will go" data-placement="top"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
          <input class="form-control" type="text" name="list_price[]">
        </td>
        <td width="16.66%">
          <!--lot charge-->
          <label for="lot_charge[]" class="control-label">Lot Charge</label>
          <input class="form-control" type="text" name="lot_charge[]">
        </td>
        <td width="16.66%">
          <!--lead time eng-->
          <label for="lead_time_eng[]" class="control-label">Lead Time (ENG)</label>
          <input class="form-control" type="text" id="lead_time_eng[]" name="lead_time_eng[]">
        </td>
        <td width="16.66%">
          <!--lead time production-->
          <label for="lead_time_prod[]" class="control-label">Lead Time (PROD)</label>
          <input class="form-control" type="text" id="lead_time_prod[]" name="lead_time_prod[]">
        </td>
        <td width="16.66%">&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="row">
  <div class="col-sm-12">
    <a href="javascript: void(0);" class="btn btn-success btn-sm hidden-print addCF">Add Row</a>
  </div>
</div>

这是添加和删除新行的代码：

$('.addCF').click(function(e) {
    e.preventDefault();
    $('#part_numbers').append('<tr><td width="16.66%"><input class="form-control part_no" type="text" name="part_no[]"></td><td width="16.66%"><input class="form-control" type="text" name="list_price[]"></td><td width="16.66%"><input class="form-control" type="text" name="lot_charge[]"></td><td width="16.66%"><input class="form-control" type="text" name="lead_time_eng[]"></td><td width="16.66%"><input class="form-control" type="text" name="lead_time_prod[]"></td><td width="16.66%"><a href="javascript:void(0)" class="btn btn-danger btn-sm hidden-print remCF">Remove</a></td></tr>');
});
$('#part_numbers').on('click', '.remCF', function(e) {
    e.preventDefault();
    $(this).parent().parent().remove();
});

当用户开始在 part_no 字段中输入时，会触发自动完成并显示匹配的零件编号列表。选择零件后，我将使用计算出的价格更新弹出框。

我没有问题将数据放在第一行 - 自动完成功能完美，并且弹出框已更新。 但是当添加新行并且我开始在“part_no[]”字段中输入时，不会触发自动完成。我已经尝试了所有我能想到的迭代输入字段以触发自动完成的变体，但没有任何效果。

这是自动完成代码。 jQuery 版本是 2.03。 jQuery UI 版本是 1.12.1。非常感谢任何帮助：

$("[name^=part_no").each(function(index) {
        $(this).on('focus',function() {
            $(this).autocomplete({
            delay: 500,
            minLength: 3,
            autoFocus: true,
            source: "items.php",
            select: function(event, ui) {
                event.preventDefault();
                var item_no = ui.item.label;
                var std_cost = ui.item.std_cost;
                var std_part_price = ui.item.std_part_price;
                var custom_price = ui.item.custom_price;
                var existing_price = ui.item.existing_price;

                $(this).val(item_no);
                $('.calc_prices').popover("destroy").popover({
                    trigger: 'manual'
                }).popover("show").on('shown.bs.popover', function() {
                    $('.popover-title').text("Calculated Pricing for " + item_no);
                    $('.popover-title').append('<button type="button" class="close popovercloseid">&times;</button>');
                    var popover = $(this);
                    var contentEl = popover.next(".popover").find(".popover-content");
                    contentEl.html("Cost: " + std_cost + "<br />Standard: " + std_part_price + "<br />Custom: " + custom_price + "<br />Existing: " + existing_price);
                })
                return false;
            },
            change: function(event, ui) {
                event.preventDefault();
                var item_no = ui.item.label;
                var std_cost = ui.item.std_cost;
                var std_part_price = ui.item.std_part_price;
                var custom_price = ui.item.custom_price;
                var existing_price = ui.item.existing_price;

                $(this).val(item_no);
                $(".calc_prices").popover("destroy").popover({
                    trigger: 'manual'
                }).popover("show").on("shown.bs.popover", function() {
                    $(".popover-title").text("Calculated Pricing for " + item_no);
                    $(".popover-title").append('<button id="popovercloseid" type="button" class="close">&times;</button>');
                    var popover = $(this);
                    var contentEl = popover.next(".popover").find(".popover-content");
                    contentEl.html("Cost: " + std_cost + "<br />Standard: " + std_part_price + "<br />Custom: " + custom_price + "<br />Existing: " + existing_price);
                })
                return false;
            }
            });
        });
    });

Answer 1

您可以使用不同的方法来执行此操作。您可以做的一件事是在添加新行后初始化自动完成。

function enableAutoComplete($element) {
    $element.autocomplete({
      .....................
    });
  }

您现在可以在使用最后一个选择器选项添加新行时使用此功能。

$('.addCF').click(function(e) {
    e.preventDefault();
    $('#part_numbers').append('<tr><td width="16.66%"><input class="form-control part_no" type="text" name="part_no[]"></td><td width="16.66%"><input class="form-control" type="text" name="list_price[]"></td><td width="16.66%"><input class="form-control" type="text" name="lot_charge[]"></td><td width="16.66%"><input class="form-control" type="text" name="lead_time_eng[]"></td><td width="16.66%"><input class="form-control" type="text" name="lead_time_prod[]"></td><td width="16.66%"><a href="javascript:void(0)" class="btn btn-danger btn-sm hidden-print remCF">Remove</a></td></tr>');
    enableAutoComplete($("[name^=part_no]:last"));
  });

并且，您可以使用相同的功能在表初始化阶段启用自动完成，

  $("[name^=part_no").each(function(index) {
    enableAutoComplete($(this));
  });

查看工作小提琴here。

Answer 2

使用克隆来获取新行的行为。

$('.addCF').click(function(e) {
    e.preventDefault();
    var mytable = $('#part_numbers');
    var newrow = mytable.find('tr').eq(0).clone(true);
    newrow.find('td').last().html('<a href="javascript:void(0)" class="btn btn-danger btn-sm hidden-print remCF">Remove</a>');
    mytable.append(newrow);
});

我在您的小提琴中对此进行了测试，替换了您拥有的“新行”功能。

注意：您可以通过将 add 函数中的删除按钮的文本添加到原始标记中来进一步简化此操作，然后将按钮隐藏在第一行，将其显示在其他行上。

修改为：

$('.addCF').click(function(e) {
    e.preventDefault();
    var mytable = $('#part_numbers');
    var newrow = mytable.find('tr').eq(0).clone(true);
    newrow.find('td').last().find('.remCF').show();
    mytable.append(newrow);
});
$('#part_numbers').find('tr').first().find('td').find('.remCF').hide();

这是一个侧面项目，但你想要一个按钮使用一个按钮

旧：<a href="javascript:void(0)" class="btn btn-danger btn-sm hidden-print remCF">Remove</a>

新：<button class="btn btn-danger btn-sm hidden-print remCF">Remove</button>