如何使用動態字段添加基於Ajax的自動完成功能

Question

如何將Ajax自動完成與動態字段添加輸入合並，我已經具有自動完成代碼並在第一個字段中工作，如果我添加另一個字段自動完成不起作用，請幫助

自動完成控制代碼：

$(document).ready(function () {
    $(function () {
        $( "#item" ).autocomplete({
            source: function(request, response) {
                $.ajax({ 
                    url: "<?php echo site_url('Produk/data'); ?>",
                    data: { id_barang: $("#item").val()},
                    dataType: "json",
                    type: "POST",
                    success: function(data){
                        response(data);
                    }    
                });
            },
        });
    });
});

$(function() {
      $("#item").change(function(){
        var nmbarang = $("#item").val();
        $.ajax({
          url: '<?php echo site_url('Produk/tampil_where'); ?>',
          type: 'POST',
          dataType: 'json',
          data: {
            'nmbarang': nmbarang
          },
          success: function (barang) {
            $("#harga").val(barang[0]['harga_barang']);
          }
        });
      });
    });

動態字段：

$(document).ready(function () {
    var counter = 1;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";  
        cols += '<td><input type="text" style="width: 200px;" id="item" name="item[' + counter + ']" placeholder="Item"></td>';
        cols += '<td><input type="text" style="width: 100px;" id="harga" name="harga[' + counter + ']" placeholder="Harga">  </td>';
        cols += '<td><input type="text" style="width: 50px;" id="qty" name="qty[' + counter + ']" placeholder="Qty" onkeyup="findTotal(); findJumlah()">  </td>';
        cols += '<td><input type="text" style="width: 100px;" id="diskon" name="diskon[' + counter + ']" placeholder="Diskon">  </td>';
        cols += '<td><input type="text" id="total" name="total[' + counter + ']" placeholder="Total"></td>';
        cols += '<td><input type="button" style="width: 50px;" class="ibtnDel btn btn-md btn-danger" value="-" onclick="findJumlah();findTotal()"></td>';
        newRow.append(cols);
        newRow.insertBefore("tr.isi");
        counter++;
    });

    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1;
    });
}); 

感謝前進

Answer 1

    (document).ready(function () {
            $(function () {
                $( "#item" ).autocomplete({
                    source: function(request, response) {
                        $.ajax({ 
                            url: "<?php echo site_url('Produk/data'); ?>",
                            data: { id_barang: $("#item").val()},
                            dataType: "json",
                            type: "POST",
                            success: function(data){
                                response(data);
                            }    
                        });
                    },
                });
            });
        });

    $(function() {
          $("#item").change(function(){
            var nmbarang = $("#item").val();
            $.ajax({
              url: '<?php echo site_url('Produk/tampil_where'); ?>',
              type: 'POST',
              dataType: 'json',
              data: {
                'nmbarang': nmbarang
              },
              success: function (barang) {
//dont't mention id.put class of that dynamic textbox for autocomplete
                $(".harga").val(barang[0]['harga_barang']);
              }
            });
          });
        });

Answer 2

已經解決了，謝謝大家

var counter = 1;

$("#addrow").on("click", function () {
    var newRow = $("<tr>").data("counter",counter);
    var cols = "";  
    cols += '<td><input type="text" style="width: 200px;" id="item' + counter + '" name="item[' + counter + ']" autocomplete="off" placeholder="Item"></td>';
    cols += '<td><input type="text" style="width: 100px;" id="harga' + counter + '" name="harga[' + counter + ']" placeholder="Harga">  </td>';
    cols += '<td><input type="text" style="width: 50px;" id="qty' + counter + '" name="qty[' + counter + ']" placeholder="Qty" onkeyup="findTotal(); findJumlah()">  </td>';
    cols += '<td><input type="text" style="width: 100px;" id="diskon' + counter + '" name="diskon[' + counter + ']" placeholder="Diskon">  </td>';
    cols += '<td><input type="text" id="total' + counter + '" name="total[' + counter + ']" placeholder="Total"></td>';
    cols += '<td><input type="button" style="width: 50px;" class="ibtnDel btn btn-md btn-danger" value="-" onclick="findJumlah()"></td>';
    newRow.append(cols);
    newRow.insertBefore("tr.isi");
    $("#item"+counter).autocomplete({
            source: function(request, response) {
            $.ajax({ 
            url: "<?php echo site_url('Produk/data'); ?>",
            data: { id_barang: $("#item"+counter).val()},
            dataType: "json",
            type: "POST",
            success: function(data){
            console.log(data);
            response(data);
            }    
        });
    },
});
$("#item"+counter).change(function(){
var nmbarang = this.value;
$.ajax({
url: '<?php echo site_url('Produk/tampil_where'); ?>',
type: 'POST',
dataType: 'json',
data: {
        'nmbarang': nmbarang
      },
success: function (barang) {
var cok = $("#harga"+parseFloat(counter-1)).val(barang[0]['harga_barang']);
$("#qty"+parseFloat(counter-1)).val('1');
console.log(cok);
}
});
});
    counter++;
});

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();       
    // counter -= 1;
});