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

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

and this new table row with input:

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

i think the problem I guess the problem is in the use of dynamic input id attribute. how to write id of dynamic input, and apply them in autocomplete? any help appreciated.

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);
    }
  });
});