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