I am working on a project to enter and exit materials from a warehouse, so it is necessary for the person to enter or remove several things at the same time. that issue I could solve with an addfield js, he added a select, with the list of materials and an input number to place the amount. up there all right.
The problem arose when the list of materials reached 700 and it was already very complicated to look for them in a select, so I decided to do an input text with autocomplete in json, but it does not work with the addfield.
I tried to make several json scripts to load a different one when adding an addfield but it is not possible, I really do not handle the javascript and jquery theme very well, so I ask for your help.
<script type="text/javascript">
$(document).ready(function(){
var maxField = 30; //Limite de los campos
var addButton = $('.agregar'); //Boton agregar
var wrapper = $('.contdim'); //contenido al agregar
var x = 1; //Inicia el contador en 0
$(addButton).click(function(){
if(x < maxField){
x++;
$(wrapper).append('<div><input name="recurso' + x +'" type="text" id="tag" placeholder="Recurso"><input type="number" style="width:80px;" placeholder="Cant" name="cantidad' + x +'" style="margin-left:5px;" /><a href="javascript:void(0);" class="eliminar" title="Qui">-</a></div>'); // Add field html
}
});
$(wrapper).on('click', '.eliminar', function(e){ //Eliminar un bloque
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var items = <?= json_encode($arrayre) ?>
$("#tag").autocomplete({
source: items
});
});
</script><div class="contdim">
<div>
<input name="recurso1" type="text" id="tag" placeholder="Recurso">
<input type="number" style="width:80px;" name="cantidad1" placeholder="Cant" />
<a href="javascript:void(0);" class="agregar" title="Agregar recurso">+</a>
</div>
</div>Thank you in advance for the help you can give me