How to use jquery autocomplete in dynamically form input

Question

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 1

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 .