在动态创建的表单字段上自动完成表单字段

Question

几个小时以来，我一直在尝试解决类似问题的解决方案，我所能找到的只是一个字段的自动完成。

这是我的表单代码：

<div class="row form-group">
        <label>1</label>
            <div class="col col-sm-1"><input type="text" id="code1" name="code[]" placeholder="Code" class="form-control" required></div>
            <div class="col col-sm-4"><input type="text" id="id2" name="product[]" placeholder="Produit" class="form-control" required></div>
            <div class="col col-sm-1"><input type="text" id="id3" name="package[]" placeholder="Cdt" class="form-control" required></div>
            <div class="col col-sm-1"><input type="text" id="id4" name="qte[]" placeholder="Qté" class="form-control" required></div>
            <div class="col col-sm-1"><input type="text" id="id5" name="price[]" placeholder="Prix Unit" class="form-control" required></div>
            <div class="col col-sm-1"><input type="text" id="id6" name="vat[]" placeholder="TVA" class="form-control" required></div>
            <div class="col col-sm-1"><input type="text" id="id7" name="lot[]" placeholder="Lot" class="form-control" required></div>
            <div class="col col-sm-1"><input type="text" id="id8" name="ddp[]" placeholder="DDP" class="form-control" required></div>
            <div onclick="addRow(this.form);"><i class="btn-sm btn-primary fa fa-plus-circle"></i></div>
    </div>

这是 javascript 自动完成 + 添加行：

var rowNum = 1;
function addRow(frm) {
    rowNum ++;
    var row = '<div class="row form-group" id="rowNum'+rowNum+'">'+
                                    '<label>'+rowNum+'</label>'+
                                    '<div class="col col-sm-1"><input type="text" id="code1" name="code[]" placeholder="Code" class="form-control" required></div>'+
                                    '<div class="col col-sm-4"><input type="text" id="id2" name="product[]" placeholder="Produit" class="form-control" required></div>'+
                                    '<div class="col col-sm-1"><input type="text" id="id3" name="package[]" placeholder="Cdt" class="form-control" required></div>'+
                                    '<div class="col col-sm-1"><input type="text" id="id4" name="qte[]" placeholder="Qté" class="form-control" required></div>'+
                                    '<div class="col col-sm-1"><input type="text" id="id5" name="price[]" placeholder="Prix Unit" class="form-control" required></div>'+
                                    '<div class="col col-sm-1"><input type="text" id="id6" name="vat[]" placeholder="TVA" class="form-control" required></div>'+
                                    '<div class="col col-sm-1"><input type="text" id="id7" name="lot[]" placeholder="Lot" class="form-control" required></div>'+
                                    '<div class="col col-sm-1"><input type="text" id="id8" name="ddp[]" placeholder="DDP" class="form-control" required></div>'+
                                '<div onclick="removeRow('+rowNum+');"><i class="btn-sm btn-danger fa fa-minus-circle"></i></div>'+
                                '<div onclick="addRow(this.form);"><i class="btn-sm btn-primary fa fa-plus-circle"></i></div>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}

和：

var mySource = [{"label":"7545","id2":"Product 001","id3":"50","id5":"3850.00","id6":"19"},
{"label":"9071","id2":"Product 002","id3":"1","id5":"103867.13","id6":"0"},
{"label":"6701","id2":"Product 003","id3":"50","id5":"2556.3","id6":"17"}];

$("#code1").autocomplete({
  source: mySource,
  select: function(event, ui){
    if(ui.item){
      $("#id2").val(ui.item.id2);
      $("#id3").val(ui.item.id3);
      $("#id5").val(ui.item.id5);
      $("#id6").val(ui.item.id6);
      return ui.item.label;
    }
    else{
      $("#id2").val('');
      $("#id3").val('');
      $("#id5").val('');
      $("#id6").val('');
    }
  },
  change: function(event, ui){
    if(ui.item){
      $("#id2").val(ui.item.id2);
      $("#id3").val(ui.item.id3);
      $("#id5").val(ui.item.id5);
      $("#id6").val(ui.item.id6);
    }
    else{
      $("#id2").val('');
      $("#id3").val('');
      $("#id5").val('');
      $("#id6").val('');
    }
  }
});

自动完成仅适用于第一行。 但不是动态添加的行！

知道如何在新添加的行上启用自动完成功能吗？

Answer 1

您对多个元素使用相同的 ID ，首先将它们更改为class 。 然后，将$("#code1")更改为$(".code1")然后在select并change function 使用$(this).closest(".form-group")来引用存在自动完成功能的 div 并使用.find()获取所需的输入并在那里添加值。

接下来，当您添加新元素时，您需要初始化您的自动完成功能。 所以，使用jQuery('#itemRows.form-group:last.code1').autocomplete(options); 这将获得最后一个添加form-group ，然后获得.code1初始化。

最后，要在单击-时删除 div，请使用jQuery(rnum).closest(".form-group").remove(); 其中rnum指的是单击然后使用最接近删除整个 div 的当前元素。

演示代码：

 var mySource = [{ "label": "7545", "id2": "Product 001", "id3": "50", "id5": "3850.00", "id6": "19" }, { "label": "9071", "id2": "Product 002", "id3": "1", "id5": "103867.13", "id6": "0" }, { "label": "6701", "id2": "Product 003", "id3": "50", "id5": "2556.3", "id6": "17" } ]; var rowNum = 1 //use like this..because mutliple places var options = { source: mySource, select: function(event, ui) { var selector = $(this).closest(".form-group") //here get closest form-group if (ui.item) { //find required inputs and then add value there selector.find(".product").val(ui.item.id2); selector.find(".package").val(ui.item.id3); selector.find(".price").val(ui.item.id5); selector.find(".vat").val(ui.item.id6); return ui.item.label; } else { selector.find(".product").val(''); selector.find(".package").val(''); selector.find(".price").val(''); selector.find(".vat").val(''); } }, change: function(event, ui) { var selector = $(this).closest(".form-group") if (ui.item) { selector.find(".product").val(ui.item.id2); selector.find(".package").val(ui.item.id3); selector.find(".price").val(ui.item.id5); selector.find(".vat").val(ui.item.id6); } else { selector.find(".product").val(''); selector.find(".package").val(''); selector.find(".price").val(''); selector.find(".vat").val(''); } } } function addRow(frm) { rowNum++; //remove ids.. add classes var row = '<div class="row form-group" id="rowNum' + rowNum + '">' + '<label for="codes">' + rowNum + '</label>' + '<div class="col col-sm-1"><input type="text" name="code[]" placeholder="Code" class="form-control code1" required></div>' + '<div class="col col-sm-4"><input type="text" name="product[]" placeholder="Produit" class="form-control product" required></div>' + '<div class="col col-sm-1"><input type="text" name="package[]" placeholder="Cdt" class="form-control package" required></div>' + '<div class="col col-sm-1"><input type="text" name="qte[]" placeholder="Qté" class="form-control qty" required></div>' + '<div class="col col-sm-1"><input type="text" name="price[]" placeholder="Prix Unit" class="form-control price" required></div>' + '<div class="col col-sm-1"><input type="text" name="vat[]" placeholder="TVA" class="form-control vat" required></div>' + '<div class="col col-sm-1"><input type="text" name="lot[]" placeholder="Lot" class="form-control lot" required></div>' + '<div class="col col-sm-1"><input type="text" name="ddp[]" placeholder="DDP" class="form-control ddp" required></div>' + '<div onclick="removeRow(' + rowNum + ');"><i class="btn-sm btn-danger fa fa-minus-circle"></i></div>' + '<div onclick="removeRow(this);"><i class="btn-sm btn-primary fa fa-plus-circle">-</i></div>'; jQuery('#itemRows').append(row); //get last added form-group in that code1 initialize it.. jQuery('#itemRows.form-group:last.code1').autocomplete(options); } function removeRow(rnum) { jQuery(rnum).closest(".form-group").remove(); //remove closest form-group var index = 1; //rstart id and count $("#itemRows.form-group").each(function() { index++; $(this).attr("id", "rowNum" + index); $(this).find("label[for=codes]").text(index) }) rowNum--; //decremnt count... } $(".code1").autocomplete(options);

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="row form-group"> <label>1</label> <div class="col col-sm-1"><input type="text" id="code1" name="code[]" placeholder="Code" class="form-control code1" required></div> <div class="col col-sm-4"><input type="text" id="id2" name="product[]" placeholder="Produit" class="form-control product" required></div> <div class="col col-sm-1"><input type="text" id="id3" name="package[]" placeholder="Cdt" class="form-control package" required></div> <div class="col col-sm-1"><input type="text" id="id4" name="qte[]" placeholder="Qté" class="form-control" required></div> <div class="col col-sm-1"><input type="text" id="id5" name="price[]" placeholder="Prix Unit" class="form-control price" required></div> <div class="col col-sm-1"><input type="text" id="id6" name="vat[]" placeholder="TVA" class="form-control vat" required></div> <div class="col col-sm-1"><input type="text" id="id7" name="lot[]" placeholder="Lot" class="form-control lot" required></div> <div class="col col-sm-1"><input type="text" id="id8" name="ddp[]" placeholder="DDP" class="form-control ddp" required></div> <div onclick="addRow(this.form);"><i class="btn-sm btn-primary fa fa-plus-circle">+</i></div> </div> <div id="itemRows"> </div>