Problem with Autocomplete Jquery ui and Clone ()

0

I have a problem trying to apply jQuery AutoComplete to multiple rows in a table when clone jQuery is used. The "autocomplete" works in the first row but does not work when additional rows are added to the table. I hope you can help me

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

This is my code:

    
asked by Rodrigo0 08.09.2017 в 17:17
source

1 answer

0

Create a function that contains the lines that create the 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);
             }
        });
}

Call this function every time you add a new row, it would be at the end of the function function addTableRow(table)

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

    IniciarAutocomplete();
}

Explanation : When you add a row, it is new to the DOM, so it does not have the autocomplete assigned.

    
answered by 08.09.2017 / 19:10
source