How to add autocomplete to dynamically added input fields? The autocomplete does not work on the dynamically added input fields

Question

These are the input fields which get added. When the add button is clicked the table with id table-field gets appended with a new row

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

The following script is to add fields and autocomplete.

1. Autocomplete does not work for added fields.
2. The suggestion box does not appear over the table rows rather it appears in the rows hence expanding the row height.

    <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

Your td has separate suggesstion-box for them so you need to specify where to show required result return from ajax . But, in your current code you are using $(".suggesstion-box").. this is targetting all suggesstion-box so to avoid this you can use selector.next().. where selector refers to current input where keyup event has occurred then using .next() you can target required divs .

Demo Code :

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>