Autocomplete in dynamic fields

Question

I have an autocomplete system and dynamic fields, my autocomplete does not work from the second dynamic field nor do I stop using id tags and replacing them with classes, please see:

<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>

Do I need to make it work using this code, someone available to help? Do I need the autocomplete to work in all fields.

Answer 1

What happens in your code is that you are initiating the autocomplete at the beginning when only one element exists and is selected, so the only and the first element that is already created receives the autocomplete. Ideally you invoke the method .autocomplete() whenever a new field is added, this way it will be applied to all new elements.

Example:

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
            });
        });

I believe this way it will work smoothly, considering that your autocomplete is already working in the first element.

Answer 2

Two ways, the simplest:

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();

        ...

});

And the ideal: create a function that creates your input using something like:

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

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

And then you call the autocomplete directly in the selection $input which has just been created.