Question

Technologies:

javascript

html

laravel

Tolerim

24 days ago

How can I make autocomplete work when dynamically adding or removing rows from a table?

One of my features is not working as expected. Specifically, I have implemented autocomplete functionality on the first input field successfully. However, when I add new input fields dynamically, the autocomplete feature does not work for these newly created fields. I am uncertain why this is happening. To clarify, here is an example of how I'm adding new rows to the table dynamically:



  
    
      Barcode
      Code
      Stock In Hand
      Stock Out Qty
      Balance Qty
    
  
  
    
      
        
      
      
        
        
      
      
        
      
      
        
      
      
        
          
          
            
          
        
      
    
  



  To add a new row, press enter.

To solve this issue, you can use the following logic: create a set of radio inputs using checkboxes that allow only one option to be selected at a time by using the same name attribute for all checkboxes and setting the type attribute to "radio". Here's an example of how to implement this:

I hope this helps! If you have any further questions, please feel free to ask.

Answers(2)

Tolerim

24 days ago

The issue you are facing is that the autocomplete feature is not working for dynamically added rows. When you click on the "Add Row" button, a new row is added to the table but the autocomplete feature is not working on the input fields of the newly added row. To fix this issue, you need to initialize the autocomplete feature on the newly added row after it has been added to the table. You can modify your code as follows: 1. First, move the autocomplete initialization code to a separate function:

function initializeAutocomplete($row) {
    $row.find("#barcodeSearch").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "{{route('getBarcodes')}}",
                type: "post",
                dataType: "json",
                data: {
                    _token: CSRF_TOKEN,
                    search: request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function(event, ui) {
            $('#barcodeSearch').val(ui.item.label); // display the selected text
            $('#barcode_id').val(ui.item.barcode); // save selected id to input
            $('#barcode').val(ui.item.barcode); // save selected id to input
            $('#productCode').val(ui.item.productCode); // save selected id to input
            $('#productId').val(ui.item.product_id); // save selected id to input
            $('#balance_Qty').val(ui.item.balanceQty); // save selected id to input
            return false;
        }
    });
}

2. Call the initializeAutocomplete function on the newly added row:

var newRow = $("<tr>");
var cols = "";

cols +=
    '<td><input type="text" placeholder="search by barcode" class="form-control" id="barcodeSearch" name="barcode[]' +
    counter + '"/></td>';
cols += '<td><input type="text" placeholder="Price" class="form-control" id="productCode" name="' + counter +
    '"/></td>';
cols += '<input type="hidden" placeholder="Price" class="form-control" id="productId" name="product_id[]' + counter +
    '"/>';
cols +=
    '<td><input type="text" placeholder="Price" class="form-control" id="balance_Qty" name="' + counter +
    '"/></td>';
cols +=
    '<td><input type="number" placeholder="Qty" class="form-control stockoutQty" name="quantity[]' + counter +
    '"/></td>';
cols +=
    '<td><div class="input-group"><input type="number" class="form-control stockBalance" name="' + counter +
    ' "readonly /><div class="ibtnDel input-group-btn"> <button class="btn btn-danger" type="button"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div></td>';

newRow.append(cols);
$("#tab_logic tbody").append(newRow);

initializeAutocomplete(newRow); // initialize autocomplete on newly added row
counter++;

By calling the initializeAutocomplete function on the newly added row, you are initializing the autocomplete feature on the input fields of the newly added row. This should fix the issue you are facing.

Accepted Answer

Thank you for providing the code snippet. It seems that the newly created input fields are not being registered by the autocomplete function. One possible reason for this is that the autocomplete function is being called only once when the page loads and not again when new input fields are added dynamically. To solve this issue, you can try calling the autocomplete function again after adding new input fields dynamically. Here's an example of how to implement this:

// Call the autocomplete function after adding new input fields
function addRow() {
  // Add new row to table
  var newRow = $("<tr>");
  var cols = "";

  cols += '<td><input id="barcode_search" class="form-control" name="barcode[]" type="text" placeholder="Search By barcode" autocomplete="off"></td>';
  cols += '<td><input type="text" id="productName" class="form-control" readonly /><input type="hidden" id="product_id" class="form-control" name="product_id[]" /></td>';
  cols += '<td><input type="number" id="balanceQty" class="form-control balanceQty" readonly /></td>';
  cols += '<td><input type="number" name="quantity[]" class="form-control stockoutQty" id="balanceCheck" required /></td>';
  cols += '<td><div class="input-group"><input type="number" name="subTotal[]" class="form-control stockBalance" readonly /><div class="ibtnDel input-group-btn"><button class="btn btn-danger" type="button"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div></td>';

  newRow.append(cols);
  $("#tab_logic").append(newRow);

  // Call the autocomplete function again
  $("#barcode_search").autocomplete({
    source: "search.php",
    minLength: 1,
    select: function(event, ui) {
      event.preventDefault();
      $('#productName').val(ui.item.label);
      $('#product_id').val(ui.item.value);
      $('#balanceQty').val(ui.item.balanceQty);
    }
  });
}

// Bind enter key to addRow function
$(document).on("keydown", "#tab_logic input", function(e) {
  if (e.keyCode == 13) {
    addRow();
  }
});

// Add new row when plus button is clicked
$("#add_row").click(function() {
  addRow();
});

// Remove row when minus button is clicked
$(document).on("click", ".ibtnDel", function(e) {
  $(this).closest("tr").remove();
});

I hope this helps! Let me know if you have any further questions.