0

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:

1 respuesta 1

0

Crea una funcion que contenga las lineas que crean el autocomplete:

Function IniciarAutocomplete(){
    $(".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);
             }
        });
}

Invoca esta funcion cada vez que agregues una nueva fila, seria al final de la funcion function addTableRow(table)

function addTableRow(table) {
    //aqui toodo tu codigo
    //

    IniciarAutocomplete();
}

Explicacion: Cuando agregas una fila, esta es nueva para el DOM, entonces no tiene el autocomplete asignado.

3
  • Muchas gracias amigo, funciono perfecto!
    – Rodrigo0
    Commented el 11 sept. 2017 a las 16:49
  • Buen día, intente darle el +1 pero como soy nuevo, no tengo los 15 de reputación que me pide
    – Rodrigo0
    Commented el 11 sept. 2017 a las 17:20
  • Esta bien, Gracias.
    – juliocpiro
    Commented el 11 sept. 2017 a las 17:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.