Tengo un problema al intentar aplicar jQuery
AutoComplete
a varias filas en una tabla cuando se utiliza clon jQuery
. El "autocompletar" funciona en la primera fila pero no funciona cuando se añaden filas adicionales a la tabla. Espero me puedan ayudar
<table id="requisicion">
<thead>
<th>PARTIDA</th>
<th>CANTIDAD</th>
<th>UNIDAD</th>
<th>PRODUCTO</th>
<th>COSTO</th>
</thead>
<tbody>
<tr>
<td><input class="form-control" type="text" value="1" name="partida[]" id="partida1"></td>
<td><input class="form-control" type="text" name="cantidad[]" id="cantidad1""></td>
<td><input class="form-control unidad1" type="text" name="unidad[]" id="unidad1"></td>
<td><input class="form-control producto1" type="text" name="producto" id="producto1" autocomplete="off"></td>
<td><input class="form-control costo1" type="text" name="costo[]" id="costo1"></td>
<td><button type="button" class="remove_button">x</button></td>
</tr>
</tbody>
</table>
<button type="button" class="add">Agregar</button> <br><br><br>
<input type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" id="guardar" value="Guardar" name="submit">
<script>
$(".producto1").autocomplete({
source: "buscaproducto.php",
minLength: 2,
select: function(event, ui) {
event.preventDefault();
$('.producto1').val(ui.item.producto);
$('.unidad1').val(ui.item.unidad);
$('.costo1').val(ui.item.costo);
$('.id_producto1').val(ui.item.id_producto);
}
});
$(document).on('click','.add',function () {
// add new row to table using addTableRow function
addTableRow($("#requisicion"));
// prevent button redirecting to new page
return false;
});
// function to add a new row to a table by cloning the last row and
// incrementing the name and id values by 1 to make them unique
function addTableRow(table) {
// clone the last row in the table
var $tr = $(table).find("tbody tr:last").clone();
// get the name attribute for the input and select fields
$tr.find("input").attr("name", function () {
// break the field name and it's number into two parts
var parts = this.id.match(/(\D+)(\d+)$/);
// create a unique name for the new field by incrementing
// the number for the previous field by 1
// repeat for id attributes
}).attr("id", function () {
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1] + ++parts[2];
});
// append the new row to the table
$(table).find("tbody tr:last").after($tr);
$tr.hide().fadeIn('slow');
// row count
rowCount = 0;
$("#requisicion tr td:first-child input").val(function () {
return ++rowCount;
});
$("#requisicion tr:last td:nth-child(2) input").val(function () {
});
$("#requisicion tr:last td:nth-child(3) input").val(function () {
});
$("#requisicion tr:last td:nth-child(4) input").val(function () {
});
$("#requisicion tr:last td:nth-child(5) input").val(function () {
});
// remove rows
$(".remove_button").on("click", function () {
if ( $('#requisicion tbody tr').length == 1) return;
$(this).parents("tr").fadeOut('slow', function () {
$(this).remove();
rowCount = 0;
$("#requisicion tr td:first-child input").val(function () {
return ++rowCount;
});
$("#requisicion tr:last td:nth-child(2) input").val(function () {
});
$("#requisicion tr:last td:nth-child(3) input").val(function () {
});
$("#requisicion tr:last td:nth-child(4) input").val(function () {
});
$("#requisicion tr:last td:nth-child(5) input").val(function () {
});
});
});
};
</script>
Este es mi codigo: