Question

我在使用动态创建输入的自动完成时遇到问题。我无法自动完成绑定到新输入。

我在第一个输入中使用的代码自动完成

$(function() {
  $( '#nama-0').autocomplete({
    source: "get_barang.php",
    minLength: 2,
    select: function( event, ui ) {
      $('#kode-0').val(ui.item.kode);
      $('#harga-0').val(ui.item.harga);
    }
  });
});

这个带有输入的新表行：

 $('#tambah').click(function() {

  var i = $('input').size() + 1,
  input = '<tr id="box' + i + '">';
  input += '<td><input id="nama-' + i + '" name="nama_input[]" autocomplete="off" class="nama form-control" /></td>';
  input += '<td><input id="kode-' + i + '" name="kode_input[]" readonly="readonly" class="form-control" /></td>';
  input += '<td><input id="harga-' + i + '" name="harga_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
  input += '<td><input id="jumlah-' + i + '" name="jumlah_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
  input += '<td><input id="total-' + i + '" name="total_input[]" class="total form-control" readonly="readonly" /></td>';
  input += '<td><button id="hapus" class="btn btn-default"><b>Hapus</b></button></td>'
  input += '</tr>';

  $('#box').append(input);


  i++;
  return false;


});

我认为问题我猜这个问题是在使用动态输入id属性。如何编写动态输入的id，并将它们应用于自动完成？任何帮助表示感谢。

Answer 1

您的问题是因为当您尝试初始化其上的自动完成功能时，DOM中不存在#nama-N元素。

要解决此问题，请在调用append()后，在点击处理程序中移动第一个代码块。试试这个：

$('#tambah').click(function(e) {
  e.preventDefault();

  var i = $('input').size() + 1;
  var input = '<tr id="box' + i + '">';
  input += '<td><input id="nama-' + i + '" name="nama_input[]" autocomplete="off" class="nama form-control" /></td>';
  input += '<td><input id="kode-' + i + '" name="kode_input[]" readonly="readonly" class="form-control" /></td>';
  input += '<td><input id="harga-' + i + '" name="harga_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
  input += '<td><input id="jumlah-' + i + '" name="jumlah_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
  input += '<td><input id="total-' + i + '" name="total_input[]" class="total form-control" readonly="readonly" /></td>';
  input += '<td><button id="hapus" class="btn btn-default"><b>Hapus</b></button></td>'
  input += '</tr>';

  $('#box').append(input);

  // attach autocomplete here as the element now exists in the DOM
  $('#nama-' + i).autocomplete({
    source: "get_barang.php",
    minLength: 2,
    select: function(event, ui) {
      $('#kode-0').val(ui.item.kode);
      $('#harga-0').val(ui.item.harga);
    }
  });
});

如何为表单动态自动完成

1 个答案: