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

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()..其中 selector 是指当前输入，其中 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>