How to make autocomplete for form dynamic

Question

i have trouble using autocomplete with dynamic created input. I can\'t get autocomplete to bind to the new inputs.

This code autocomplete I used on the first input

Answer 1

Your issue is because the #nama-N element doesn't exist in the DOM when you try to initialise the autocomplete function on it.

To fix this, move your first block of code inside the click handler, after append() has been called. Try this:

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