JQuery autocomplete() works only in first row of table

user_14557078 0
Viewed 193

Autocomplete jQuery UI only works the first row of table. I'm working on a pharmacy search engine form with the Autocomplete jQuery UI on Bootstrap, the problem is that the autocomplete only works the first row. When i click add button it create a new row but in new row it do not work.

My jQuery syntax is as:

$("#itemSearch").autocomplete({
    source: "{{ route('autoCompSearch') }}",
    minLength:3,
    select: function(key, value){
        console.log(key, value);
    },
});

My addRow() is as following;

$('#journalRows').on('keydown', '#addRow',function(event){
    // alert('you are here...');
    count++;
    dynamic_field(count);
    return true;
    }

and my dynamic_filed(count) function is as;

function dynamic_field(number)
{
    // New Function to add New Row in Journal
    var html = '';

    html += '<tr class="options" name="line_items">'
    html += '<td width="5%"><input type="text" id="checkbox. $user->id ." name="id[]" class="form-control" value="" disabled=""></td>'
    html += '<td width="15%"><input type="text" name="barcode_id[]" id="barcodeSearch" class="form-control"></td>'
    html += '<td width="30%"><input type="text" name="item_id[]" id="itemSearch" class="form-control select-product"></td>'
    html += '<td width="5%"><input type="text" name="qty[]" value="1" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
    html += '<td width="10%"><input type="text" id="sal_price" value="1" name="sal_price[]" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
    html += '<td width="5%"><input type="text" name="discPer[]" class="form-control" value="0" placeholder="Discount percentage..." onkeyup="InvoiceCalculation()"></td>'
    html += '<td width="15%"><input type="text" id="totUnitAmount" name="totUnitAmount[]" class="form-control form-control-sm" value="0"></td>'
    html += '<td><input type="button" id="addRow" name="addRow[]" class="form-control btn btn-success" value="+"></td>'
    html += '<td><input type="button" id="removeRow" name="removeRow[]" class="form-control btn btn-danger" value="-"></td>';
    html += '</tr>';

    $('#journalRows').append(html);
};

This is works but only autocomplete option is not working in second and onward rows.....

autocomplete javascript
1 Answers

For new row you need to change the Id of the autocomplete field. Each autocomplete field should have a unique id:

$("#itemSearch").autocomplete({
    source: "{{ route('autoCompSearch') }}",
    minLength:3,
    select: function(key, value){
        console.log(key, value);
    },
});

$("#itemSearch1").autocomplete({
    source: "{{ route('autoCompSearch') }}",
    minLength:3,
    select: function(key, value){
        console.log(key, value);
    },
});

Also you need to initialise autocomplete module on the field after it's created, otherwise it won't be in the DOM and jQuery won't work for the field

UPDATE:

change your dynamic_field function as follows:

function dynamic_field(number)
{
    // New Function to add New Row in Journal
    var html = '';

    html += '<tr class="options" name="line_items">'
    html += '<td width="5%"><input type="text" id="checkbox. $user->id ." name="id[]" class="form-control" value="" disabled=""></td>'
    html += '<td width="15%"><input type="text" name="barcode_id[]" id="barcodeSearch" class="form-control"></td>'
    html += '<td width="30%"><input type="text" name="item_id[]" id="itemSearch-'+number+'" class="form-control select-product"></td>'
    html += '<td width="5%"><input type="text" name="qty[]" value="1" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
    html += '<td width="10%"><input type="text" id="sal_price" value="1" name="sal_price[]" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
    html += '<td width="5%"><input type="text" name="discPer[]" class="form-control" value="0" placeholder="Discount percentage..." onkeyup="InvoiceCalculation()"></td>'
    html += '<td width="15%"><input type="text" id="totUnitAmount" name="totUnitAmount[]" class="form-control form-control-sm" value="0"></td>'
    html += '<td><input type="button" id="addRow" name="addRow[]" class="form-control btn btn-success" value="+"></td>'
    html += '<td><input type="button" id="removeRow" name="removeRow[]" class="form-control btn btn-danger" value="-"></td>';
    html += '</tr>';

    $('#journalRows').append(html);
    $("#itemSearch-"+number).autocomplete({
          source: "{{ route('autoCompSearch') }}",
          minLength:3,
          select: function(key, value){
             console.log(key, value);
          },
    });
};
user_82694270
Related