如何将自动完成添加到动态添加的输入字段？自动完成功能不适用于动态添加的输入字段

Question

这些是添加的输入字段。 当点击添加按钮时，带有 id table-field 的表格会附加一个新行

     <tr>
        <td>
           <input type="text" class="form-control form-control-sm purchase_order_item" 
            name="purchase_order_item[]" >
           <div class="suggesstion-box"></div>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm 
             name="purchase_order_item_quantity[]" id="purchase_order_item_quantity">
        </td>
        <td>
            <input type="text" class="form-control form-control-sm" name="purchase_order_item_rate[]" 
             id="purchase_order_item_rate">
        </td>
        <td>
            <input type="text" class="form-control form-control-sm" name="purchase_order_item_tax[]" 
             id="purchase_order_item_tax">
        </td>
        <td>  
            <input type="text" class="form-control form-control-sm" name="purchase_order_item_amount[]" 
            id="purchase_order_item_amount">
        </td>
        <td>
            <center><a href="javascript:void(0)" name="add" id="add" class="btn btn-outline-secondary 
             btn-sm add"><i class="fa fa-plus" aria-hidden="true"></i></a></center>
        </td>

以下脚本是添加字段和自动完成。

1. 自动填充功能不适用于添加的字段。
2. 建议框不会出现在表格行上方，而是出现在行中，因此会扩大行高。

    <script>
    // AJAX call for autocomplete 
    $(document).ready(function(){
        jQuery(document ).on( "keyup", ".purchase_order_item", function(){
                   
            $.ajax({
                type: "POST",
                url: "back/read_purchase_order_item.php",
                data:'keyword='+$(this).val(),
                beforeSend: function(){
                  $(".suggesstion-box").show();
                },
                success: function(data){
                  $(".suggesstion-box").show();
                  $(".suggesstion-box").html(data);
                }
            });
        });
    });
    //To select select item name
    function select_item(val) {
        $(".purchase_order_item").val(val);
        $(".suggesstion-box").hide();
    }
    
    $(document).ready(function(){
            
        var max = 5;
        var x = 1;

        var html = '<tr><td><input type="text" class="form-control form-control-sm purchase_order_item" name="purchase_order_item[]"><div class="suggestion-box"></div></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_quantity[]"></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_rate[]"></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_tax[]"></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_amount[]"></td><td><div class="text-center"><a href="javascript:void(0)" name="remove" id="remove" class="btn btn-outline-secondary btn-sm remove"><i class="fa fa-times" aria-hidden="true"></i></a></div></td></tr>';
      
        $("#add").click(function(){
            if (x <= max){            
                $("#table_field").append(html); 
                x++;
            }
        });
        $("#table_field").on('click','#remove',function(){
          $(this).closest('tr').remove(); 
          x--;
        });
    });
    </script>
             

Answer 1

您的 td 有单独的 suggesstion-box 供他们使用，因此您需要指定从 ajax 显示所需结果返回的位置。但是，在您当前的代码中，您使用的是$(".suggesstion-box")..，这是针对所有suggesstion-box，因此为避免这种情况，您可以使用selector.next()..，其中选择器指的是发生keyup事件的当前输入，然后使用.next()您可以定位所需的div .

演示代码：

jQuery(document).on("keyup", ".purchase_order_item", function() {
  $(".suggesstion-box").hide();
  var selector = $(this)
  /* $.ajax({
     type: "POST",
     url: "back/read_purchase_order_item.php",
     data: 'keyword=' + $(this).val(),
     beforeSend: function() {
       $(".suggesstion-box").show();
     },
     success: function(data) {*/
  selector.next().show();
  //inside your function pass `this` as wll
  selector.next().html("<div onclick=select_item('abc',this)>Abc</div>"); //use `data` here ..
  /*}
  });*/
});
//To select select item name
function select_item(val, el) {
  //closest and then find
  $(el).closest("tr").find(".purchase_order_item").val(val);
  $(".suggesstion-box").hide();
}

$(document).ready(function() {

  var max = 5;
  var x = 1;

  var html = '<tr><td><input type="text" class="form-control form-control-sm purchase_order_item" name="purchase_order_item[]"><div class="suggesstion-box"></div></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_quantity[]"></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_rate[]"></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_tax[]"></td><td><input type="text" class="form-control form-control-sm" name="purchase_order_item_amount[]"></td><td><div class="text-center"><a href="javascript:void(0)" name="remove" id="remove" class="btn btn-outline-secondary btn-sm remove"><i class="fa fa-times" aria-hidden="true">x</i></a></div></td></tr>';

  $("#add").click(function() {
    if (x <= max) {
      $("#table_field").append(html);
      x++;
    }
  });
  $("#table_field").on('click', '#remove', function() {
    $(this).closest('tr').remove();
    x--;
  });
});

.suggesstion-box {
  position: relative;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_field" class="table">
  <tr>
    <td>
      <input type="text" class="form-control form-control-sm purchase_order_item" name="purchase_order_item[]">
      <div class="suggesstion-box"></div>
    </td>
    <td>
      <input type="number" class="form-control form-control-sm" name=" purchase_order_item_quantity[] " id="purchase_order_item_quantity ">
    </td>
    <td>
      <input type="text " class="form-control form-control-sm " name="purchase_order_item_rate[] " id="purchase_order_item_rate ">
    </td>
    <td>
      <input type="text " class="form-control form-control-sm " name="purchase_order_item_tax[] " id="purchase_order_item_tax ">
    </td>
    <td>
      <input type="text " class="form-control form-control-sm " name="purchase_order_item_amount[] " id="purchase_order_item_amount ">
    </td>
    <td>
      <center><a href="javascript:void(0) " name="add " id="add" class="btn btn-outline-secondary btn-sm add "><i class="fa fa-plus " aria-hidden="true ">+</i></a></center>
    </td>
  </tr>
</table>