0

Estou com um sistema de autocomplete e campos dinâmicos, meu autocomplete não funciona a partir do segundo campo dinâmico nem eu deixando de utilizar as tags id e substituindo por classes, vejam por favor:

<script>
jQuery(document).ready(function () {

	jQuery('.produto').autocomplete("<?= $base ?>/scripts/funcoes_produto_nfe.php", {
		matchContains: true,
		selectFirst: false
	});
	var campos_max = 20;   //max de 10 campos
	var x = 1; // campos iniciais
	jQuery('#add_field').click(function (e) {
		e.preventDefault();     //prevenir novos clicks
		if (x < campos_max) {

			jQuery('#listas').append('<div>\<div class="row"><div class="col-md-6 form-group">\<label class="control-label" for="te">Produto/ Serviço (*)</label><br>\
					<input type="text" name="item_nfe_produto_id[]" class="form-control produto" id="produto" required="">\</div>\<div class="col-md-4 form-group"><label class="control-label" for="r">Quantidade</label><br>\
					<input type="number" min="0" name="item_nfe_quantidade[]" class="form-control" id="qtd" value="1">\
					</div><a href="#" class="remover_campo btn btn-danger">Remover</a>\</div>\
					</div>');
			x++;
		}
	});

	// Remover o div anterior
	jQuery('#listas').on("click", ".remover_campo", function (e) {
		e.preventDefault();
		jQuery(this).parent('div').remove();
		x--;
	});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listas" class="panel-body">
<div class="row">
	<div class="col-md-6 form-group">
		<label class="control-label" for="produto"><span class="add-on">Produto/ Serviço (*)</span></label><br>
			<input type="text" name="item_nfe_produto_id[]" class="form-control produto" id="" required="">
	</div> 
	<div class="col-md-4 form-group">
		<label for="qtd" class="control-label">Quantidade</label>
		<div class="input-group input-group-sm">                            
			<input type="number" min="0" name="item_nfe_quantidade[]" class="form-control" id="qtd" value="1">
			<span class="input-group-btn">
				<button type="submit" class="btn btn-primary btn-flat" id="add_field"><i class="fa fa-plus"></i> Add produto e quantidade</button>
			</span>
		</div>
	</div> 
</div>
</div>

Preciso fazer funcionar utilizando este código, alguém disponível para ajudar? Preciso que o autocomplete funcione em todos os campos.

2 Respostas 2

0

Dois jeitos, o mais simples:

function addAutoComplete() {
    jQuery('.produto').autocomplete("<?= $base ?>/scripts/funcoes_produto_nfe.php", {
        matchContains: true,
        selectFirst: false
    });    
}

jQuery(document).ready(function () {
    addAutoComplete();
    ...

    if (x < campos_max) {
        addAutoComplete();

        ...

});

E o ideal: criar uma função que crie o seu input usando algo do tipo:

function criaInput() {}
    var $input = $('<input type="text" ...').addClass('produto')

    $input.autocomplete(""<?= $base ?>/scripts/funcoes_produto_nfe.php", {.....})
}

E aí você chama o autocomplete diretamente na na selecao $input que acabou de ser criada.

1
  • Desculpe, mais eu não entendi bem o que quis dizer, na segunda opção, eu não consigo compreender pois nesta função aí eu tenho que colocar também as divs, que engloba todos os campos, juntamente com o botao de remover. Pra ser sincero este não foi um código desenvolvido por mim, eu peguei pronto, mais algumas coisas eu consigo fazer, como colocar mascaras se necessário, mais eu não consigo é fazer o autocomplete funcionar, se você puder fazer um exemplo funcional, ficarei grato. Commented 14/11/2016 às 22:44
0

O que acontece em seu código é que você está inicializando o autocomplete no inicio quando apenas um elemento existe e é selecionado, por isso o único e o primeiro elemento que já está criado recebe o autocomplete. O ideal é você invocar o método .autocomplete() sempre que um novo campo for adicionado, desta forma irá ser aplicado à todos os novos elementos.

Exemplo:

jQuery('#add_field').click(function (e) {
            e.preventDefault();     //prevenir novos clicks
            if (x < campos_max) {

                jQuery('#listas').append('<div>\<div class="row"><div class="col-md-6 form-group">\<label class="control-label" for="te">Produto/ Serviço (*)</label><br>\
                        <input type="text" name="item_nfe_produto_id[]" class="form-control produto" id="produto" required="">\</div>\<div class="col-md-4 form-group"><label class="control-label" for="r">Quantidade</label><br>\
                        <input type="number" min="0" name="item_nfe_quantidade[]" class="form-control" id="qtd" value="1">\
                        </div><a href="#" class="remover_campo btn btn-danger">Remover</a>\</div>\
                        </div>');
                x++;
            }

            jQuery('.produto').autocomplete("<?= $base ?>/scripts/funcoes_produto_nfe.php", {
                 matchContains: true,
                 selectFirst: false
            });
        });

Acredito que desta forma irá funcionar sem problemas, considerando que seu autocomplete já esta funcionando no primeiro elemento.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .