Handi Ajar Subekti Handi Ajar Subekti - 1 year ago 105
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;">
<th width="250px">Nama</th>
<th width="100px">Kode</th>
<th width="100px">Harga</th>
<th width="100px">Jumlah</th>
<th width="80px"></th>

<tbody id='itemlist' >
<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>

<button type="button" class="btn btn-default" onclick="additem(); return false">

script dynamically created inputs and autocmplete

$(function() {
$( "#nama" ).autocomplete({
source: "get_barang.php",
minLength: 2,
select: function( event, ui ) {

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

// 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

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


Any advice?

Answer Source

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) {

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download