1

Tengo un select(codigo del producto) y quiero que cuando eliga una opcion, el siguiente input(nombre del producto) se autocomplete , basandose en los registros de la base de datos. Para hacer el código de autocompletado me base en una de las respuestas a esta pregunta Autocompletar campos "input" a partir de una selección "select" aplique el código a mi codigo.

Este es el código del formulario , esta en una tabla.

 cell1.innerHTML =  `<select class="col-12 form-control mr-sm-2 " name="codigo" id='opciones' onchange='cambioOpciones();'> 
                                                          <option disabled selected> - Seleccione - </option>
                                                          <?php
                                                                while($datos = mysqli_fetch_array($consulta_producto)){ //array recorre datos                               
                                                            ?>
                                                        <option value="<?php echo $datos['codigo']?>"> <?php echo $datos['codigo'] ?>  </option>
                                                          <?php } ?>
                                                          </select>`;
                                        cell2.innerHTML = '<input class="form-control mr-sm-2 col-12" type="text"  name="nombre" id="showId">';;

Lo que no se como hacer es como capturar el nombre del producto y asignarselo al input de nombre, para que cuando se autocomplete no me muestre el valor del select, si no que se muestre otro dato ( el nombre). Ya intenté hacer una consulta parecida a la que hice para traer el codigo, pero algo falla y no me trae el nombre, también intenté agregarle un value al input del nombre que me traiga el dato y cerrar el ciclo while despues de los dos inputs, pero no me funciona..

Aqui esta mi script de autocompletado

function cambioOpciones(){
                                        document.getElementById('showId').value=document.getElementById('opciones').value;
                                        }

Espero me puedan ayudar.

MODIFICACION:

modifique el codigo de la tabla haciendo dos consultas diferentes en vez de una, para que me muestre el codigo y nombre por separado, en dos ciclos diferentes, pero ahora no se como hacer el codigo javascript para que el primer input autocomplete el otro....

Lo que conseguí con esto es que me muestre en el input el nombre, pero yo quiero que lo muestre después de que ingrese el código.

aqui esta el html

 cell1.innerHTML = `<select class="col-12 form-control mr-sm-2 " name="codigo" id='opciones' onchange='cambioOpciones();'> 
                                                          <option disabled selected> - Seleccione - </option>
                                                          <?php
                                                                while ($datos = mysqli_fetch_array($consulta_producto_codigo)) { //array recorre datos
                                                            ?>
                                                        <option value="<?php echo $datos['codigo']?>"> <?php echo $datos['codigo'] ?>  </option>
                                                          <?php } ?>
                                                          </select>`;
                                cell2.innerHTML = <?php while ($dato = mysqli_fetch_array($consulta_producto_nombre)) { ?>

                                    '<input class="form-control mr-sm-2 col-12" type="text"  name="nombre" id="showId" value="<?php echo $dato['nombre']?>">' <?php }  ?> ;;

y modifique el javascript pero no funciona( no manejo mucho javascript)

 //AUTOCOMPLETAR INPUT nombre
                            function cambioOpciones() {
                                if (document.getElementById('opciones').value) {
                                    document.getElementById('showId').value
                                }
                                //document.getElementById('showId').value=document.getElementById('opciones').value;
                            }

MODIFICACIÓN 2

Modifique el código basandome en un comentario, funcionó una parte, ya se autocompleta, pero esa función se ejecuta solo 1 vez, esto es un problema ya que mi select y mi autocompletado deben funcionar cuantas veces se cree una fila en la tabla(la tabla es el formulario). Cuando creo una segunda fila y escribo un codigo diferente , el autocompletado se ejecuta en el inpuut de la primera fila no en el de la segunda. Aqui esta el codigo de la tabla :

cell1.innerHTML =  `<select name="materia" class=" form-control mr-sm-2" id='opciones' onchange='cambioOpciones();'>
                                                                                            <?php
while ($datos = mysqli_fetch_array($consulta_materia)) { //array recorre datos
    ?>
                                                                                <option value="<?php echo $datos['codigo'] ?>" data-nombre="<?php echo $datos['nombre'] ?>"> <?php echo $datos['codigo'] ?>  </option>
                                                                                        <?php }?>
                                                                                </select> `;
                                                            cell2.innerHTML = '<input type="text"  name="nombre" id="showId" class="form-control mr-sm-2 " >';

Sigue el código javascript

 //  AUTOCOMPLETADO DE NOMBRE
                                                            function cambioOpciones(){
                                                                //el evento siempre esta disponible en la función
                                                                //event.target -> elemento que disparó el evento ( select name= codigo)
                                                                let sel = event.target;
                                                                //definir valor inicial
                                                                let value = '';
                                                                //si se selecciona una opción...
                                                                if(event.target.value){
                                                                    //tomar el nombre desde el atributo data-nombre de la opción seleccionada
                                                                    value = sel.options[sel.selectedIndex].dataset.nombre;
                                                                }
                                                                //asignar valor al campo
                                                                document.querySelector('#showId').value = value;

                                                            }
2
  • ¿Es necesario poner el código como texto de cada option? ahí podrías poner el nombre del producto y sería muy fácil tomarlo con `elemento.options[elemento.selectedIndex].text'
    – Triby
    Commented el 2 sept. 2020 a las 17:58
  • si es necesario, ya que necesito mostrar los dos datos y que el usuario eliga el codigo y me traiga el nombre
    – Karol
    Commented el 3 sept. 2020 a las 20:17

1 respuesta 1

0

Si no tienes posibilidad de guardar el nombre como texto de cada opción, puedes usar atributo de datos, solo agregando data-nombre="Nombre del producto" después del valor:

<?php
        while($datos = mysqli_fetch_array($consulta_producto)){
                //array recorre datos                               
?>
                <option value="<?php echo $datos['codigo']?>" data-nombre="<?php echo $datos['nombre']?>"><?php echo $datos['codigo'] ?></option>
<?php } ?>

Como tienes varias filas, no puedes repetir ID, deben ser únicos y, además, si planeas procesar todo con un formulario, debes cambiar los nombres para que se manejen como arreglo y se envíen todos en lugar de uno: <select name="codigo[]">.

Cuando se modifique un select es necesario obtener el contenedor padre (TR) y, desde ahí, puedes acceder al input para actualizar el nombre.

function cambioOpciones() {
    // El evento siempre está disponible en la función
    // event.target es el elemento que lo disparó (select name="codigo")
    let sel = event.target;
    // Definir valor inicial
    let value = '';
    // Si se seleccionó una opción
    if(event.target.value) {
        // Tomar nombre desde data-nombre de la opción seleccionada
        value = sel.options[sel.selectedIndex].dataset.nombre;
    }
    // Obtener fila a la que pertenece el select
    let tr = sel.closest('tr');
    
    // Obtener campo desde TR, por atributo name y asignar valor
    tr.querySelector('[name="nombre[]"]').value = value;
}
<table>
<tr>
  <td>
    <select class="col-12 form-control mr-sm-2 " name="codigo[]" onchange='cambioOpciones();'> 
      <option disabled selected> - Seleccione - </option>
      <option value="Código 1" data-nombre="Nombre de producto 1">Código 1</option>
      <option value="Código 2" data-nombre="Nombre de producto 2">Código 2</option>
      <option value="Código 3" data-nombre="Nombre de producto 3">Código 3</option>
      <option value="Código 4" data-nombre="Nombre de producto 4">Código 4</option>
      <option value="Código 5" data-nombre="Nombre de producto 5">Código 5</option>
    </select>
  </td>
  <td>
    <input class="form-control mr-sm-2 col-12" type="text"  name="nombre[]">
  </td>
</tr>
<tr>
  <td>
    <select class="col-12 form-control mr-sm-2 " name="codigo[]" onchange='cambioOpciones();'> 
      <option disabled selected> - Seleccione - </option>
      <option value="Código 1" data-nombre="Nombre de producto 1">Código 1</option>
      <option value="Código 2" data-nombre="Nombre de producto 2">Código 2</option>
      <option value="Código 3" data-nombre="Nombre de producto 3">Código 3</option>
      <option value="Código 4" data-nombre="Nombre de producto 4">Código 4</option>
      <option value="Código 5" data-nombre="Nombre de producto 5">Código 5</option>
    </select>
  </td>
  <td>
    <input class="form-control mr-sm-2 col-12" type="text"  name="nombre[]">
  </td>
</tr>
</table>

Al procesar el formulario en PHP, vas a recibir los campos como arreglos y debes recorrerlos para realizar las acciones correspondientes, como insertar o actualizar en base de datos:

<?php
// Creas las variables enviadas con el formulario
$codigos = $_POST['codigo'];
$nombres = $_POST['nombre'];

// Recorres por índice, todos los campos tendrán la misma cantidad de elementos
foreach($codigos as $indice => $codigo) {
    $nombre = $nombres[$indice];
    // Aquí ya puedes usar $codigo y $nombre para lo que necesites
}
7
  • Muchisimas gracias! me funcionó era lo que queria lograr, !!!! Pero hay un problema, esa función esta en un script junto con el select, ya que tengo una función mas arriba para agregar y eliminar filas, porque este formulario esta en una tabla dinamica, pero cuando ejecuto el codigo 1 vez, en la proxima fila no funciona, sabes como puedo arreglarlo ?
    – Karol
    Commented el 7 sept. 2020 a las 12:32
  • @KAROLYULIETHPACHECORODRIGUE, edita la pregunta para poner tu código actualizado, con la tabla dinámica.
    – Triby
    Commented el 7 sept. 2020 a las 14:20
  • Listo, revisa la respuesta, está actualizada.
    – Triby
    Commented el 9 sept. 2020 a las 15:47
  • Muchas gracias ! funciona a la perfección , Me has ayudado un montón!!! Eres muy amable.
    – Karol
    Commented el 9 sept. 2020 a las 17:07
  • Me alegra que haya funcionado, no olvides marcar la respuesta como aceptada. ¡Gracias!
    – Triby
    Commented el 9 sept. 2020 a las 17:13

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.