Question

如何将ajax自动完成与动态字段添加输入合并，我已经具有自动完成代码并在第一个字段中工作，如果我添加另一个字段自动完成不起作用，请帮助

自动完成控制代码：

<div class='input-group date' id='datetimepickerA'>
          <%= f.text_field (:start), :class => "form-control" %>
          <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
      </span>
        </div>

动态字段：

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

感谢前进

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

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

2 个答案: