在自动完成功能中断的表单中添加行

Question

在一个表单中，我有 2 个输入。在第一个输入中，我使用 datalist 通过 JSON 加载它，第二个输入在第一个输入更改时自动完成。到这里一切正常！

然后我添加了一个添加按钮，我在其中添加了相同的行。问题是因为我使用 id 到 select 输入，当我添加新行时我有相同的 id..所以自动完成不起作用..

我该如何解决这个问题？这里是 jssFiddle.

counter = 0;
var dataList = document.getElementById('products');
var jsonOptions = [{
  "product": "11111",
  "description": "description 1"
}, {
  "product": "22222",
  "description": "description 2"
}, {
  "product": "33333",
  "description": "description 3"
}];

jsonOptions.forEach(function(item) {

  var option = document.createElement('option');

  option.value = item.product;
  option.text = item.description;

  dataList.appendChild(option);


  $(function() {
    $('#product').on('change keyup', function() {

      var i = this.value;
      var description = "";
      var productsInBox = 0;

      jsonOptions.forEach(function(a) {
        if (a.product == i) {
          description = a.description;
          productsInBox = a.productsInBox;
        }
      });
      $('#description').val(description);


    });
  });

});



$('#form1')
  // Add button click handler
  .on('click', '.addButtonDED', function() {
    counter++;
    var $template = $('#addLineInDed'),
      $clone = $template
      .clone()
      .removeClass('hide')
      .removeAttr('id')
      .attr('data-index', counter)
      .insertBefore($template);

    // Update the name attributes
    $clone
      .find('[name="product"]').attr('name', 'product-' + counter).end()
      .find('[name="description"]').attr('name', 'description-' + counter).end()


  })

  // Remove button click handler
  .on('click', '.removeButtonDED', function() {
    var $row = $(this).parents('.form-group'),
      index = $row.attr('data-index');
    counter--;
    // Remove element containing the fields

    $row.remove();
  });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="form1" method="post" class="form-horizontal" role="form">
  <fieldset>


    <div class="form-group">
      <div class="col-xs-2">
        <input type="text" id="product" list="products" class="form-control" name="product-0" />
        <datalist id="products"></datalist>
      </div>

      <div class="col-xs-4">
        <input id="description" type="text" class="form-control" name="description-0" />
      </div>



      <div class="col-xs-1">
        <button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
      </div>
    </div>


    <div id="addLineInDed" class="form-group hide">
      <div class="form-group">
        <div class="col-xs-2">
          <input type="text" id="product" list="products" class="form-control" name="product-0" />
          <datalist id="products"></datalist>
        </div>

        <div class="col-xs-4">
          <input id="description" type="text" class="form-control" name="description-0" />
        </div>


        <div class="col-xs-1">
          <button type="button" class="btn btn-default removeButtonDED"><i class="fa fa-minus"></i></button>
        </div>
      </div>
    </div>


   <div class="col-md-10 ">
       <button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button> 
    </div>

  </fieldset>
</form>

Answer 1

正如您所说，您已尝试使用类、

如何封装您的代码，以便您拥有如下功能：函数 FilldatalistOptions（元素，选项）

然后您可以拥有 2 个具有不同 ID 的数据列表（也许是 products1 和 products2）。然后像这样调用函数：

var dataList1 = document.getElementById('products1');
var dataList2 = document.getElementById('products2');
FilldatalistOptions(datalist1, jsonOptions);
FilldatalistOptions(datalist2, jsonOptions);

Answer 2

使用类，将您的选择重命名为数组值：

counter = 0;
var dataList = $('.products');
var jsonOptions = [{
  "product": "11111",
  "description": "description 1"
}, {
  "product": "22222",
  "description": "description 2"
}, {
  "product": "33333",
  "description": "description 3"
}];

jsonOptions.forEach(function(item) {

  var option = '<option value="' + item.product + '">' + item.description + '</option>';

  dataList.append(option);
});

$(function() {
  $('body').on('input', '.product,.products', function() {

    var i = this.value;
    var description = "";
    var productsInBox = 0;

    jsonOptions.forEach(function(a) {
      if (a.product == i) {
        description = a.description;
        productsInBox = a.productsInBox;
      }
    });
    $(this).closest('.form-group').find('.description').val(description);


  });
});





$('#form1').on('click', '.addButtonDED', function() {
    var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
    .find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
    .find('i').removeClass('fa-plus').addClass('fa-minus').end();
    $template.insertAfter('.form-group:last');
  })

  // Remove button click handler
  .on('click', '.removeButtonDED', function() {
    var $row = $(this).closest('.form-group');
    $row.remove();
  });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
  <fieldset>


    <div class="form-group">
      <div class="col-md-2">
        <input type="text" list="products" class="form-control product" name="product[]" />
        <datalist id="products" class="products"></datalist>
      </div>

      <div class="col-md-4">
        <input id="" type="text" class="form-control description" name=" description[]" />
      </div>



      <div class="col-md-1">
        <button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
      </div>
    </div>

    <div class="col-md-10 ">
      <button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button>

    </div>



  </fieldset>
</form>

</fieldset>
</form>

循环读取值：

foreach($_POST['product'] as $product) {
 //do stuf
}

在自动完成功能中断的表单中添加行

Adding lines in a form an autocomplete function breaks

javascript

jquery

html-datalist