Как сделать автозаполнение для формы динамической

Question

У меня проблема с использованием автозаполнения с динамическим созданным вводом. Я не могу получить автозаполнение для привязки к новым входам.

Этот код автополный я использовал на первый вход

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

и этой новой строки таблицы с входом:

$('#tambah').click(function() { 
 

 
    var i = $('input').size() + 1, 
 
    input = '<tr id="box' + i + '">'; 
 
    input += '<td><input id="nama-' + i + '" name="nama_input[]" autocomplete="off" class="nama form-control" /></td>'; 
 
    input += '<td><input id="kode-' + i + '" name="kode_input[]" readonly="readonly" class="form-control" /></td>'; 
 
    input += '<td><input id="harga-' + i + '" name="harga_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>'; 
 
    input += '<td><input id="jumlah-' + i + '" name="jumlah_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>'; 
 
    input += '<td><input id="total-' + i + '" name="total_input[]" class="total form-control" readonly="readonly" /></td>'; 
 
    input += '<td><button id="hapus" class="btn btn-default"><b>Hapus</b></button></td>' 
 
    input += '</tr>'; 
 

 
    $('#box').append(input); 
 

 

 
    i++; 
 
    return false; 
 

 

 
});

Я думаю, проблема, я думаю, проблема заключается в использовании динамического атрибута входного идентификатора. как писать идентификатор динамического ввода и применять их в автозаполнении? любая помощь оценивается.

Answer 1

Ваша проблема в том, что элемент #nama-N не существует в DOM при попытке инициализировать функцию автозаполнения на нем.

Чтобы исправить это, переместите свой первый блок кода внутри обработчика кликов, после того, как был вызван append(). Попробуйте следующее:

$('#tambah').click(function(e) { 
    e.preventDefault(); 

    var i = $('input').size() + 1; 
    var input = '<tr id="box' + i + '">'; 
    input += '<td><input id="nama-' + i + '" name="nama_input[]" autocomplete="off" class="nama form-control" /></td>'; 
    input += '<td><input id="kode-' + i + '" name="kode_input[]" readonly="readonly" class="form-control" /></td>'; 
    input += '<td><input id="harga-' + i + '" name="harga_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>'; 
    input += '<td><input id="jumlah-' + i + '" name="jumlah_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>'; 
    input += '<td><input id="total-' + i + '" name="total_input[]" class="total form-control" readonly="readonly" /></td>'; 
    input += '<td><button id="hapus" class="btn btn-default"><b>Hapus</b></button></td>' 
    input += '</tr>'; 

    $('#box').append(input); 

    // attach autocomplete here as the element now exists in the DOM 
    $('#nama-' + i).autocomplete({ 
    source: "get_barang.php", 
    minLength: 2, 
    select: function(event, ui) { 
     $('#kode-0').val(ui.item.kode); 
     $('#harga-0').val(ui.item.harga); 
    } 
    }); 
});