Handi Ajar Subekti Handi Ajar Subekti - 27 days ago 7
jQuery Question

How to use jquery autocomplete in dynamically form input

I'm having an issue using jQuery autocomplete with dynamically created inputs. I can't get autocomplete to bind to the new inputs.

Form Table

<table class="table table-condensed" style="margin-left: 10px;">
<thead>
<tr>
<th width="250px">Nama</th>
<th width="100px">Kode</th>
<th width="100px">Harga</th>
<th width="100px">Jumlah</th>
<th width="80px"></th>
</tr>
</thead>


<tbody id='itemlist' >
<tr>
<td><input id='nama' name='nama_input[]' class='form-control' /></td>
<td><input id='kode' readonly name='kode_input[]' class='form-control' /></td>
<td><input id='harga' readonly name='harga_input[]' class='form-control' /></td>
<td><input name='jumlah_input[]' class='form-control' /></td>
<td></td>
</tr>
</tbody>



<tr>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-default" onclick="additem(); return false">
<b>Tambah</b>
</button>
</td>
</tr>
</table>


script dynamically created inputs and autocmplete



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

var i = 1;

function additem() {
// menentukan target append
var itemlist = document.getElementById('itemlist');

// membuat element
var row = document.createElement('tr');
var nama = document.createElement('td');
var kode = document.createElement('td');
var harga = document.createElement('td');
var jumlah = document.createElement('td');
var aksi = document.createElement('td');


// meng append element
itemlist.appendChild(row);
row.appendChild(nama);
row.appendChild(kode);
row.appendChild(harga);
row.appendChild(jumlah);
row.appendChild(aksi);



// membuat element input
var nama_input = document.createElement('input');
nama_input.setAttribute('id', 'nama');
nama_input.setAttribute('name', 'nama_input[]');
nama_input.setAttribute('class', 'form-control');

var kode_input = document.createElement('input');
kode_input.setAttribute('id', 'kode');
kode_input.setAttribute('name', 'kode_input[]');
kode_input.setAttribute('readonly', '');
kode_input.setAttribute('class', 'form-control');

var harga_input = document.createElement('input');
harga_input.setAttribute('id', 'harga');
harga_input.setAttribute('name', 'harga_input[]');
harga_input.setAttribute('readonly', '');
harga_input.setAttribute('class', 'form-control');


var jumlah_input = document.createElement('input');
jumlah_input.setAttribute('name', 'jumlah_input[]');
jumlah_input.setAttribute('class', 'form-control');

var hapus = document.createElement('span');

// meng append element input
nama.appendChild(nama_input);
kode.appendChild(kode_input);
harga.appendChild(harga_input);
jumlah.appendChild(jumlah_input);
aksi.appendChild(hapus);

hapus.innerHTML = '<button class="btn btn-small btn-default"><b>Hapus</b></button>';
// membuat aksi delete element
hapus.onclick = function () {
row.parentNode.removeChild(row);
};


i++;
}
</script>





Any advice?

Answer

You can use JS Math functions to create a random and unique id.. then you will need to call the autocomplete inside the function. Just repeat this process for each of your autocomplete methods.

var namaid = 'nama' + (Math.floor((1 + Math.random()) * 0x10000));
nama_input.setAttribute('id', namaid);
$("#" + namaid).autocomplete({
    source: "get_barang.php",
    minLength: 2,
    select: function(event, ui) {
        $('#kode').val(ui.item.kode);
        $('#harga').val(ui.item.harga);
    }
});

Handy tip: Since you're using jQuery, you can create elements with jQuery a lot easier than in vanilla JS.. have a look at this.