動的フォーム入力でjqueryオートコンプリートを使用する方法

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> 

スクリプトを動的に作成入力と

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

何かアドバイスをautocmplete？

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のを使用しているので、あなたはバニラJSよりもずっと簡単にjQueryを持つ要素を作成することができます。.. thisを見てみましょう。