Autocomplete em input dinâmico

[manolegal 12]

Bom dia amigos.

Realizei diversas pesquisas, porém não consegui resolver o problema.

Em campos normais do formulário, o Autocomplete está funcionando normalmente.

Não estou conseguindo fazer funcionar em input dinâmico, dentro de uma tabela onde posso inserir diversas linhas.

 

Meu campo:

<div id="list" class="row-fluid">                  
<table class="table" cellspacing="1" cellpadding="1" id="detalhes">
    <caption>Detalhes do Documento</caption>
        <thead>
            <tr>
                <th style="text-align:center; background: #FFFF99;">Produto</th>
            </tr>
        </thead>
  
<?php
for($i=0; $i<count($produto); $i++) {
?> 
        
        <tbody>
            <tr>
                <td><?php $y=$i+1; echo"$y"; ?>
                <td>
                    <input name="produto[]" id="produto" type="text" size="12" maxlength="10" value="<?php echo "$produto[$i]";?>">
                </td>
            </tr> 
        </tbody>
        
<?php } // Fecha "for"   ?> 
  
        <tfoot>
            <tr>
                <td colspan="4">
                    <button type="button" class="btn-mini btn-primary" onclick="addRowToTable();">Adicionar</button>
                    <button type="button" class="btn-mini btn-danger" onclick="removeRowFromTable();">Remover</button>
                    <button type="button" class="btn-mini btn-success" href="#" data-toggle="modal" data-target="#modal_cad_produto" title="Clique aqui para cadastrar um novo Produto!">Cadastrar Novo Produto</button>
                </td>
            </tr>
        </tfoot>
  
</table>

Meu código js para adicionar/remover inputs dinâmicos:

<script language="javascript" type="text/javascript">
function addRowToTable() {
var tbl = document.getElementById('detalhes');
//var lastRow = tbl.rows.length -1;
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1 - //se não houver cabeçalho da linha da tabela, depois iteração lastRow + 1
var iteration = lastRow - 1;
//var row = tbl.insertRow(lastRow + 1); // cria outra linha
var row = tbl.insertRow(lastRow); // cria outra linha


// NÚMERO DA CÉLULA
var cellLeft = row.insertCell(0); // insere uma celula a esquerda
var textNode = document.createTextNode(iteration); // esquerda cria o numero
cellLeft.setAttribute('align', 'center');
cellLeft.setAttribute('class', 'branco');
cellLeft.appendChild(textNode); // fecha a celular da esquerda


// right cell (Produto)
var cellRight1 = row.insertCell(1);
var e1 = document.createElement('input');
cellRight1.setAttribute('align', 'left');
e1.setAttribute('class', 'campo');
e1.setAttribute('type', 'text');
e1.setAttribute('name', 'produto');
e1.setAttribute('id', 'produto');
e1.setAttribute('maxlength', '7');
e1.setAttribute('value', '');
e1.setAttribute('size', '10');
//e1.setAttribute('onkeyup', 'multiplica(' + iteration + ')');
e1.setAttribute('onkeypress', 'return handleEnter(this, event)');
cellRight1.appendChild(e1);

function removeRowFromTable() {
    var tbl = document.getElementById('detalhes');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>

 

Meu código Autocomplete:

<script type="text/javascript">
$(document).ready(function() {
$('#detalhes').find('.produto').autocomplete({
    source: "ajx_pes_p_nom.php",
    minLength: 1,
}); 
});
</script>
  

No aguardo

Att

 

[Eziquiel 96]

Olá. 

Primeiro: faltou fechar a função AddRowToTable(). 

 

function addRowToTable() {
  .
  .
  .
  cellRight1.appendChild(e1);
}

Segundo: Seu código JQuery que aplica o AutoComplete deve ficar assim:

<script type="text/javascript">
   $(document).on('DOMNodeInserted','#detalhes .campo', function(){
    $(this).autocomplete({
      source: "ajx_pes_p_nom.php",
      minLength: 1,
    }); 
  }); 
</script>

Para atribuir eventos a elementos criados dinamicamente, deve-se utilizar o método  $(document).on(...). Veja no link abaixo.

http://www.kadunew.com/blog/jquery/atribuindo-eventos-a-elementos-criados-dinamicamente

Abraço.

[srmacedo 66]

Pesquisa pelo plugin jquery (select2).

[manolegal 12]

Olá amigos.

Funcionou da seguinte forma:

<script type="text/javascript">
$(document).on('DOMNodeInserted','#detalhes .produto', function(){
    $(this).autocomplete({
      source: "ajx_prod_p_nom.php",
      minLength: 1,
    }); 
});
// Ao criar nova linha
</script>

No campo produto incluí ainda:

class="produto"

Em relação ao select2, estou utilizando em alguns formulários, porém quando há um grande número de dados vindo do BD ele se torna muito lento.

 

Tópico resolvido. Obrigado pela ajuda.