Autocomplete in dynamic fields

Navigation
0

I have an autocomplete system and dynamic fields, my autocomplete does not work from the second dynamic field nor do I stop using the 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><divid="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>

I need to make use of this code, someone available to help? I need autocomplete to work in all fields.

    
asked by anonymous 14.11.2016 / 12:50

2 answers

0

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 ideally: 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 autocomplete directly in the $input selection that has just been created.

    
14.11.2016 / 19:23
0

What happens in your code is that you are initializing autocomplete at startup when only one element exists and is selected, so the one and only element that is already created is autocomplete. Ideally, you invoke the .autocomplete() method 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 that this will work without problems, considering that your autocomplete is already working on the first element.

    
15.11.2016 / 20:51
How to display a confirmation message after checking in the servlet? SimpleDateFormatt write with empty field