时间戳

首页 > 解决方案 > 如何使用动态字段添加基于 ajax 的自动完成功能

javascript - 如何使用动态字段添加基于 ajax 的自动完成功能

问题描述

如何将 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;
    });
});

感谢提前

标签： javascriptjqueryajax

解决方案

    (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']);
              }
            });
          });
        });

推荐阅读