CODEWITHSUNDEEP
javascriptjqueryautocomplete
Handi Ajar Subekti
Handi Ajar Subekti

Reputation: 49

How to make autocomplete for form dynamic

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.

Upvotes: 1

Views: 90

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 2

Related Questions