jquery autocomplete with php source on javascript dinamically added row

Question

I have created a web project where I add rows dynamically to a datatable using JavaScript. The selection of products to add is selected using jquery autocomplete plugin. The problem is that the autocomplete functions only at the first row. I have tried something but I can't figure out where the problem is?

Thank you

     // javascript code

     $('#span_product_details').html('');
        
     add_product_row();

     function add_product_row(count = '')
     {
            var html = '';
            html += '<tr id="row'+count+'">';
            html += '<td><input type="text" step="any" name="product_code[]" id="product_code_'+count+'" class="form-control input_width_0_7" placeholder="code" readonly /></td>';

            //this is the input that operates with jquery autocomplete

            html += '<td><input type="text" name="term[]" id="term'+count+'" />'; 

            //end of the input that operates with jquery autocomplete              

            html += '<input type="hidden" name="hidden_product_id[]" id="hidden_product_id'+count+'" />';
            html += '<input type="hidden" name="vlera_takses[]" id="vlera_takses_'+count+'"/>';
            html += '</td>';
            html += '<td><input type="number" step="any" name="quantity[]" id="quantity_'+count+'" class="form-control input_width prc" placeholder="qty" required /></td>';
            html += '<td><input type="text" step="any" name="mu_emri[]" id="mu_emri_'+count+'" class="form-control input_width_0_5 prc" placeholder="st.price" readonly required /></td>';
            html += '<td><input type="number" step="any" name="price[]" id="price_'+count+'" class="form-control input_width" value="0" readonly required /></td>';
            html += '<td><input type="number" step="any" name="price_new[]" id="price_new_'+count+'" class="form-control input_width prc" value="0" required /></td>';
            html += '<td><input type="number" step="any" name="discount[]" id="discount_'+count+'" class="form-control input_width prc" value="0" required /></td>';
            html += '<td><input type="number" step="any" name="discount_value[]" id="discount_value_'+count+'" class="form-control input_width prc" value="0" readonly required /></td>';
            html += '<td><input type="number" step="any" name="ci_N[]" id="ci_N_'+count+'" class="form-control input_width prc" value="0" readonly required /></td>';
            html += '<td><input type="number" step="any" name="t_N[]" id="t_N_'+count+'" class="form-control input_width prc" value="0" readonly required /></td>';
            html += '<td><input type="text" step="any" name="tax_name[]" id="tax_name_'+count+'" class="form-control input_width prc" readonly required /><input type="hidden" step="any" name="tax[]" id="tax_'+count+'" class="form-control input_width prc" readonly required /></td>';
            html += '<td><input type="number" step="any" name="ddv_vler[]" id="ddv_vler_'+count+'" class="form-control input_width" placeholder="tax_vler" readonly required /></td>';
            html += '<td><input type="number" step="any" name="total[]" id="total_'+count+'" class="form-control input_width" placeholder="totali" readonly required /></td>';
            html += '<td><button type="button" name="remove" id="'+count+'" class="btn btn-danger remove"><span class="glyphicon glyphicon-trash"></span></button></td>';
            html += '</tr>';
          $('#span_product_details').append(html);
    }
    
    var count = 0;

    $(document).on('click', '#add_more', function(){
        count = count + 1;
        add_product_row(count);
    });

    var row_no = 0;
    $(document).on('click', '.remove', function(){
        var row_no = $(this).attr("id");
        $('#row'+row_no).remove();
         calculateTotal();
    });



    //here it is what I have tried

    $(function test() {
        $("[id^='term']").each(function() {
              var id = $(this).attr('id');
              id = id.replace("term",'');
              $( '#term'+id ).autocomplete({
                    source: 'fetch.php',
                });                  
            });            
    });


    // fetch.php code

    $servername='localhost';
    $username='root';
    $password='';
    $dbname = "db_ms_konti";

    $conn=mysqli_connect($servername,$username,$password,"$dbname");
    if(!$conn){
    die('Could not Connect MySql Server:' .mysql_error());
    }

   if (isset($_GET['term'])) {

    $term = $_GET['term'];

    $query = "SELECT product_code FROM products WHERE product_code LIKE '%$term' LIMIT 10";
     $result = mysqli_query($conn, $query);
 
     if (mysqli_num_rows($result) > 0) {
      while ($user = mysqli_fetch_array($result)) {
       $res[] = $user['product_code'];
      }
     } else {
       $res = array();
     }
     //return json res
     echo json_encode($res);
 }

After attaching the new row you have to init the autocomplete plugin at this new element. — harley81, Mar 29 '22 at 08:34
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Mar 29 '22 at 10:16

score 0 · Accepted Answer · edited Mar 29 '22 at 17:09

JavaScript Code:

$('#span_product_details').html('');
        
add_product_row();

function add_product_row(count = '') {
    var html = '';
    html += '<tr id="row'+count+'">';
    html += '<td><input type="text" step="any" name="product_code[]" id="product_code_'+count+'" class="form-control input_width_0_7" placeholder="code" readonly /></td>';

    // first change

    html += '<td><input type="text" class="autoc" name="term[]" id="term_'+count+'" /></td>';

    // end first change              

    html += '<input type="hidden" name="hidden_product_id[]" id="hidden_product_id'+count+'" />';
    html += '<input type="hidden" name="vlera_takses[]" id="vlera_takses_'+count+'"/>';
    html += '</td>';
    html += '<td><input type="number" step="any" name="quantity[]" id="quantity_'+count+'" class="form-control input_width prc" placeholder="qty" required /></td>';
    html += '<td><input type="text" step="any" name="mu_emri[]" id="mu_emri_'+count+'" class="form-control input_width_0_5 prc" placeholder="st.price" readonly required /></td>';
    html += '<td><input type="number" step="any" name="price[]" id="price_'+count+'" class="form-control input_width" value="0" readonly required /></td>';
    html += '<td><input type="number" step="any" name="price_new[]" id="price_new_'+count+'" class="form-control input_width prc" value="0" required /></td>';
    html += '<td><input type="number" step="any" name="discount[]" id="discount_'+count+'" class="form-control input_width prc" value="0" required /></td>';
    html += '<td><input type="number" step="any" name="discount_value[]" id="discount_value_'+count+'" class="form-control input_width prc" value="0" readonly required /></td>';
    html += '<td><input type="number" step="any" name="ci_N[]" id="ci_N_'+count+'" class="form-control input_width prc" value="0" readonly required /></td>';
    html += '<td><input type="number" step="any" name="t_N[]" id="t_N_'+count+'" class="form-control input_width prc" value="0" readonly required /></td>';
    html += '<td><input type="text" step="any" name="tax_name[]" id="tax_name_'+count+'" class="form-control input_width prc" readonly required /><input type="hidden" step="any" name="tax[]" id="tax_'+count+'" class="form-control input_width prc" readonly required /></td>';
    html += '<td><input type="number" step="any" name="ddv_vler[]" id="ddv_vler_'+count+'" class="form-control input_width" placeholder="tax_vler" readonly required /></td>';
    html += '<td><input type="number" step="any" name="total[]" id="total_'+count+'" class="form-control input_width" placeholder="totali" readonly required /></td>';
    html += '<td><button type="button" name="remove" id="'+count+'" class="btn btn-danger remove"><span class="glyphicon glyphicon-trash"></span></button></td>';
    html += '</tr>';
    $('#span_product_details').append(html);

    // second change
    $( '.autoc' ).autocomplete({
        source: 'fetch.php',
    });
}
    
var count = 0;

$(document).on('click', '#add_more', function(){
    count = count + 1;
    add_product_row(count);
});

var row_no = 0;
$(document).on('click', '.remove', function(){
    var row_no = $(this).attr("id");
    $('#row'+row_no).remove();
    calculateTotal();
});

Fetch.php Code:

$servername='localhost';
$username='root';
$password='';
$dbname = "db_ms_konti";

$conn=mysqli_connect($servername,$username,$password,"$dbname");
if (!$conn) {
    die('Could not Connect MySql Server:' .mysql_error());
}
if (isset($_GET['term'])) {
    $term = $_GET['term'];
    $query = "SELECT product_code FROM products WHERE product_code LIKE '%$term' LIMIT 10";
    $result = mysqli_query($conn, $query);
 
    if (mysqli_num_rows($result) > 0) {
        while ($user = mysqli_fetch_array($result)) {
            $res[] = $user['product_code'];
        }
    } else {
        $res = array();
    }
    // return json res
    echo json_encode($res);
}

Also don't forget to include jQuery autocomplete libraries.

jquery autocomplete with php source on javascript dinamically added row

1 Answers1