Autocomplete em input dinâmico
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
AttDiscussão (3)
Carregando comentários...