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

Posted 2023-05-08

【中文标题】如何将自动完成添加到动态添加的输入字段？自动完成功能不适用于动态添加的输入字段

【英文标题】：How to add autocomplete to dynamically added input fields? The autocomplete does not work on the dynamically added input fields

【发布时间】：2021-06-15 01:31:13

【问题描述】：

这些是添加的输入字段。 当点击添加按钮时，带有 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>

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

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

    <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>
             

【参考方案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>

【讨论】：

您好，感谢您的合作。现在，每当我在添加的输入字段中从自动完成中选择一个选项时，它都会用相同的值填充前一个输入字段。

嗨，在您的select_item 中传递this 以及一个参数，然后在您的select_item 函数中使用相同的参数。