0

bueno estoy detenido en el siguiente problema, estoy haciendo un proyecto en el que el usuario agrega las filas que necesita y en cada fila el campo clave es el que busca la información en bbdd con que se autocompletan los demás campos. Originalmente lo tenia de esta manera:

<tr>
    <td><input id='clave_1' class='clave' onkeyup='javascript:this.value=this.value.toUpperCase();'></td>
    <td><input id='producto_1' class='producto' readonly></td>
    <td><input id='piezas_1' class='piezas' readonly></td>
    <td><input id='lote_1' class='lote' readonly></td>
    <input type='hidden' id='id_1'>
</tr>

y funcionaba con este script:

<script>
  $(function(){     
        $("#clave_1").autocomplete({
            source: "ajax.php",
            minLength: 1,
            select: function(event, ui) {
                event.preventDefault();
                $('#clave_1').val(ui.item.clave);
                $('#producto_1').val(ui.item.producto);
                $('#piezas_1').val(ui.item.piezas);
                $('#lote_1').val(ui.item.lote);
                $('#id_1').val(ui.item.id);
             }
        });
    });
</script>

Ahora lo que intento hacer es una variable que se este incrementado conforme el usuario agregue más filas y permita buscar en la bbdd y el autocompletado . Realicé el siguiente script, el agregar y eliminar filas si me funciona pero no el autocompletado, alguien puede ayudarme? Saludos!

<script>
   var a=0;
   $(document).ready(function(){
   $(document).on('click', '.add', function(){
     var a++;               
    var html = "<tr><td><input id='clave_"+a+"' class='clave' onkeyup='javascript:this.value=this.value.toUpperCase();'></td><td><input id='producto_"+a+"' class='producto' readonly></td><td><input id='piezas_"+a+"' class='piezas' readonly></td><td><input id='lote_"+a+"' class='lote' readonly></td><input type='hidden' id='id_"+a+"'><td><button type='button' name='remove' class='btn btn-danger btn-sm remove'><i class='fas fa-minus-circle'></i>Eliminar</button></td></tr>";
    $('tbody').append(html);
});

$(document).on('click', '.remove', function(){
    $(this).closest('tr').remove();
});

$(function(){       
        $("#clave_"+a).autocomplete({
            source: "ajax.php",
            minLength: 1,
            select: function(event, ui) {
                event.preventDefault();
                $('#clave_'+a).val(ui.item.clave);
                $('#producto_'+a).val(ui.item.producto);
                $('#piezas_'+a).val(ui.item.piezas);
                $('#lote_'+a).val(ui.item.lote);
                $('#id_'+a).val(ui.item.id);
             }
        });
    });
  });
</script>

1 respuesta 1

0

Bien, tu problema es que los nuevos inputs no se les está agregando el listener del autocompletado, al agregar el elemento al DOM debes asignarle el listener. En este caso deberías agregar la funcion del autocomplete dentro del bloque de codigo donde lo insertas al DOM (justo despues de insertar el elemento). te dejo el ajuste que necesitas aca:

<script>
   var a=0;
   $(document).ready(function(){
   $(document).on('click', '.add', function(){
     var a++;               
    var html = "<tr><td><input id='clave_"+a+"' class='clave' onkeyup='javascript:this.value=this.value.toUpperCase();'></td><td><input id='producto_"+a+"' class='producto' readonly></td><td><input id='piezas_"+a+"' class='piezas' readonly></td><td><input id='lote_"+a+"' class='lote' readonly></td><input type='hidden' id='id_"+a+"'><td><button type='button' name='remove' class='btn btn-danger btn-sm remove'><i class='fas fa-minus-circle'></i>Eliminar</button></td></tr>";
    $('tbody').append(html);


        $("#clave_"+a).autocomplete({
            source: "ajax.php",
            minLength: 1,
            select: function(event, ui) {
                event.preventDefault();
                $('#clave_'+a).val(ui.item.clave);
                $('#producto_'+a).val(ui.item.producto);
                $('#piezas_'+a).val(ui.item.piezas);
                $('#lote_'+a).val(ui.item.lote);
                $('#id_'+a).val(ui.item.id);
             }
        });


});

$(document).on('click', '.remove', function(){
    $(this).closest('tr').remove();
});

  });
</script>

Eso debería ser suficiente, espero sea de ayuda, Saludos.

1
  • Muchas gracias @Jhoubert_Rincon, efectivamente era lo que me hacía falta. Saludos!
    – Hugo
    Commented el 17 oct. 2019 a las 0:04

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.