Question

我在使用动态创建输入的jQuery自动完成时出现问题。我无法自动完成绑定到新输入。

表单

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

脚本动态创建输入和自动填充

＆＃13;

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

＆＃13;

有什么建议吗？

Answer 1

您可以使用JS Math函数创建随机且唯一的ID ..然后您需要在函数内调用自动完成。只需为每个自动填充方法重复此过程。

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

方便提示：由于您使用的是jQuery，因此您可以使用jQuery创建元素比使用jilla更容易...查看this。

如何在动态表单输入中使用jquery自动完成

1 个答案: