jquery - Autocomplete em input dinâmico - Stack Overflow em Português https://pt.stackoverflow.com/questions/408046/autocomplete-em-input...

Qualquer pessoa pode fazer uma pergunta

Stack Overflow em Português é um site de
perguntas e respostas para programadores
profissionais e entusiastas. Leva apenas um Qualquer um pode responder
minuto para se inscrever.

Inscreva-se para participar desta comunidade As melhores respostas recebem

votos positivos e sobem para os
primeiros lugares

Autocomplete em input dinâmico

Perguntada 4 anos, 4 meses atrás Modified 4 anos, 4 meses atrás Vista 1mil vezes

1 of 5 02/02/2024, 10:16
jquery - Autocomplete em input dinâmico - Stack Overflow em Português https://pt.stackoverflow.com/questions/408046/autocomplete-em-input...

Bom dia pessoal. Estou tentando implementar autocomplete no input dinamico mas não
funciona. Já teste chamando class ou id e nada.
1
segue o código para que possam me dar uma luz mostrando onde estou errando. Função
Jquery que adiciono linha numa tabela dinamicamente. e a função autocomplete no campo
descri (descricao do produto)

$(document).ready(function(){

//Atribui o evento click a classe .btn-insert-field

$('.btn-insert-field').click(function(e){
//Remove ação padrão do link para não atualiza a página
e.preventDefault();

//Define o elemento onde será inserido os campos

var target = $("#target");
//total de linhas criadas dinamicamente
//Será utilizado com indices pra serem removidos mais
facilmente
var total = $("#target tr").length;
//Cria estrutura que será inserida
var html = '<tr class="row-field-'+total+'">';
html += '<td><input type="number" id="qtt"
name="qtt[]" /></td>';
html += '<td><input type="text" class="descri"
id="descri" name="descri[]" style="text-transform:uppercase" /></td>';
html += '<td><a href="#" class="btn btn-danger
btn-sm btn-delete-row" data-id="'+total+'">X</a></td>';
html += '<tr>';

//Adiciona no final do elemento que foi selecionado

anteriormente
target.append(html);
});

//Atribui a classe .btn-delete-row o evento click

//É usado on porque o elemento será criado dinamicamente
$(document).on('click', '.btn-delete-row', function(e){
//Remove ação padrão do link para não atualiza a página
e.preventDefault();
//pega o valor do data-id
var id = $(this).data('id');
//Remove a linha
$('.row-field-'+id).detach();

});

$(document).on('DOMNodeInserted','.descri', function(){
$(this).autocomplete({
source:'pesquisa_produto.php'
});
});

});

2 of 5 02/02/2024, 10:16
jquery - Autocomplete em input dinâmico - Stack Overflow em Português https://pt.stackoverflow.com/questions/408046/autocomplete-em-input...

Dentro do meu html eu mostro numa div ->

<div class="off-3 col-6">

<table class="actions">
<thead>
<tr>

<th>Quantidade</th>

<th>Descrição</th>
<th width="5"><a
href="#" class="btn btn-primary btn-insert-field">Adicionar</a></th>
</tr>
</thead>
<tbody id="target"> <!--
aqui aparece a linha da tabela com 2 campos input criados automaticamentes -->

</tbody>
</table>
</div>

Quando chamo a função autocomplete fora do input dinâmico funciona perfeitamente.

jquery input autocompletar dinâmico

Compartilhar editada 6/09/2019 às 13:50 perguntada 6/09/2019 às 13:41

Melhore esta pergunta Seguir Sam's Sam Deadoc
Deadoc's
user 80,7mil 21 67 122 user 15 6

1 Resposta Ordenado por: Maior pontuação (predefinição)

3 of 5 02/02/2024, 10:16
jquery - Autocomplete em input dinâmico - Stack Overflow em Português https://pt.stackoverflow.com/questions/408046/autocomplete-em-input...

Troque DOMNodeInserted por focus . Quando o campo, seja criado dinamicamente ou não,
receber o foco, irá ganhar o autocomplete:
0
$(document).on('focus','.descri', function(){
// este if verifica se o campo já tem autocomplete
if( !$(this).hasClass("ui-autocomplete-input") ){
$(this).autocomplete({
source:'pesquisa_produto.php'
});
}
});

Veja um exemplo:

$(function(){
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];

$(document).on('focus','.descri', function(){
// este if verifica se o campo já tem autocomplete
if( !$(this).hasClass("ui-autocomplete-input") ){
$(this).autocomplete({
source: availableTags
});
}
});

$("#addicionar").on("click", function(){

$("#box").append('<input class="descri">');

});

});

4 of 5 02/02/2024, 10:16
jquery - Autocomplete em input dinâmico - Stack Overflow em Português https://pt.stackoverflow.com/questions/408046/autocomplete-em-input...

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui
/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>

<div id="box">Digite "basic": <input class="descri"></div>

<button id="addicionar">Adicionar input</button>

Executar Esconder resultado Página toda

Digite "basic": sc
Adicionar input

Compartilhar editada 6/09/2019 às 14:18 respondida 6/09/2019 às 13:49

Melhore esta resposta Seguir Sam's Sam
user 80,7mil 21 67 122

Assim como sugerido também não funcionou. Estou utilizando a versão ajax.googleapis.com/ajax
/libs/jquery/jqueryui/1.12.1/… e code.jquery.com/ui/1.10.3/jquery-ui.js e ajax.googleapis.com/ajax
/libs/jquery/3.3.1/jquery.min.js – Deadoc 6/09/2019 às 14:09

Estranho. Adicionei um exemplo funcional na resposta. Veja que funciona normal. – Sam 6/09/2019 às
14:21

Aqui comigo não funciona... porque será? E esta linkado corretamente. – Deadoc 6/09/2019 às 16:02

Funciona em campos que não foram adicionados de forma dinâmica? – Sam 6/09/2019 às 16:05

Estou testando aqui... parou de funcionar também! na função eu chamo a página

pesquisa_produto.php que está assim: <?php include_once 'conexao.php'; $descri =
filter_input(INPUT_GET,'term', FILTER_SANITIZE_STRING); $sql = "SELECT * FROM produtos WHERE
descric LIKE '%".$descri."%' ORDER BY descric ASC LIMIT 5"; $pdo = Conexao::getInstance(); $result =
$pdo->prepare($sql); $result ->execute(); while($row = $result->fetch(PDO::FETCH_ASSOC)){ $data[] =
$row['descric']; } echo json_encode($data); ?> – Deadoc 6/09/2019 às 16:08

5 of 5 02/02/2024, 10:16