具有相同名称的多行输入的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);
});

我在你的小提琴中测试了这个，取代了你的“新行”功能。

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

修改过：

$('.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();

这是一个副作品，但你想要一个按钮使用按钮

OLD：<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>