Autocomplete with dynamic fields

Question

I have a table with the fields (product, Qtde, pUnit and ptotal) the product field is autocomplete.

When you enter the page, there is already a line, so the autocomplete works perfect.

I’ve been reading that since the new lines don’t exist in the DOM, you need to do something for him to understand and accept the new line.

Well, I’ve done everything, but nothing’s helped.

Adds new line

    var numProd         = $("#NumProd").val();
    var numProdAtual    = parseInt(numProd) + 1;

    var newRow = $('<tr id="tr-'+numProdAtual+'">');

    var cols = "";

    //cols += '<tr id="tr-'+numProdAtual+'">';

    cols += '<td>';
    cols += '<input type="text" name="dProdutoVenda['+numProdAtual+']" data-id-reg="'+numProdAtual+'" class="form-control error input-desc-prod" required="required" autocomplete="off" />';
    cols += '</td>';

    cols += '<td>';
    cols += '<input type="text" name="qProdutoVenda['+numProdAtual+']" data-id-reg="'+numProdAtual+'" class="form-control error text-right" required="required" onBlur="AtualizaValorProd("+numProdAtual+");" />';
    cols += '</td>';

    cols += '<td>';
    cols += '<input type="text" name="vUnitProdutoVenda['+numProdAtual+']" data-id-reg="'+numProdAtual+'" class="form-control text-right" readonly />';
    cols += '</td>';

    cols += '<td>';
    cols += '<input type="text" name="vTotProdutoVenda['+numProdAtual+']" data-id-reg="'+numProdAtual+'" class="form-control text-right" readonly />';
    cols += '</td>';

    cols += '<td>';
    cols += '<button class="btn btn-danger btn-circle exc-prod" type="button"><i class="fa fa-times"></i></button>';
    cols += '</td>';

    newRow.append(cols);
    $("#table-vendas-produtos").append(newRow);

Recognize the new line

    $(".input-desc-prod:last").focus().autocomplete("produtos-procura-descricao.asp", { 
        minChars: 1 //Número mínimo de caracteres para aparecer a lista
      , matchContains: true //Aparecer somente os que tem relação ao valor digitado
      , scrollHeight: 230 //Altura da lista dos nomes
      , selectFirst: true //Vim o primeiro da lista selecionado
      , mustMatch: true //Caso não existir na lista, remover o valor
      , delay: 0 //Tempo para aparecer a lista para 0, por padrão vem 200
    });

I’ve tried that too

    newRow.find('.input-desc-prod').autocomplete("produtos-procura-descricao.asp", { 
        minChars: 1 //Número mínimo de caracteres para aparecer a lista
      , matchContains: true //Aparecer somente os que tem relação ao valor digitado
      , scrollHeight: 230 //Altura da lista dos nomes
      , selectFirst: true //Vim o primeiro da lista selecionado
      , mustMatch: true //Caso não existir na lista, remover o valor
      , delay: 0 //Tempo para aparecer a lista para 0, por padrão vem 200
    });

I’ve tried other autocomplete too and it didn’t work.

I wonder if someone could shed some light at the end of the tunnel?

Thank you

running, running and found the solution, it worked, I’ll leave it on record, it might help someone.

$at('#table-vendas-produtos').find('.input-desc-prod').autocomplete("produtos-procura-descricao.asp", {