Llenar campos a partir de un Select con una base de datos

publicado por: Anonymous

Saludos, estoy haciendo un Autocomplete con PHP, Ajax y JQuery poblado por una base de datos en SQL que constantemente cambia de registros y con las opciones de ese Select tengo que llenar varios campos de texto de un formulario que pueden o no ser modificados por el usuario.
He buscado ejemplos con Autocomplete y no me muestra resultados. Esto es lo que llevo hasta ahora:

Interfaz del usuario

$(function() {
        $("#plaza").autocomplete({
            source: "pruebaPlaza.php",
            select: function(event, ui) {
                event.preventDefault();
                $('#plaza').val(ui.item.plaza);
                $('#clave_ct_necesidad').val(ui.item.clave_ct_necesidad);
                $('#clave_ct_nomina').val(ui.item.clave_ct_nomina);
                $('#clave_ct_analitico').val(ui.item.clave_ct_analitico);
                $('#qna_ini').val(ui.item.qna_ini);
                $('#qna_fin').val(ui.item.qna_fin);
                $('#asignatura').val(ui.item.asignatura);
                $('#observaciones').val(ui.item.observaciones);

             }
        });
    });

<div class="ui-widget">
  Plaza:  <input id="plaza">
  <br>
  Centro de Trabajo con Necesidad: <input type="text" id="clave_ct_necesidad'">
  <br>
  Centro de Trabajo Nómina: <input type="text"  id="clave_ct_nomina" >
  <br>
  Centro de Trabajo Analítico: <input type="text"  id="clave_ct_analitico" >
  <br>
  Quincena de inicio: <input type="text"  id="qna_ini" >
  <br>
  Quincena de término: <input type="text"  id="qna_fin">
  <br>
  Asignatura: <input id="asignatura">
  <br>
  Observaciones: <input id="observaciones">

Script que autocompleta

<?php
if (isset($_GET['term'])){
    include ('config.php');

$return_arr = array();
/* Si la conexión a la base de datos , ejecuta instrucción SQL. */
$searchTerm = $_GET['term'];
    $sql = "SELECT * FROM dbo.propuesta_vacancias where plaza like '%".$searchTerm."' ";
    $stmt=sqlsrv_query($dbcon, $sql);
    /* Recuperar y almacenar en conjunto los resultados de la consulta.*/
    while ($row=sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
        $plaza=$row['plaza'];
        $clave_ct_necesidad=$row['clave_ct_necesidad'];
        $clave_ct_nomina=$row['clave_ct_nomina'];
        $clave_ct_analitico=$row['clave_ct_analitico'];
        $qna_ini=$row['qna_ini'];
        $qna_fin=$row['qna_fin'];
        $asignatura=$row['asignatura'];
        $observaciones=$row['observaciones'];
        array_push($return_arr,$row_array);
    } 


/* Codifica el resultado del array en JSON. */
echo json_encode($return_arr);

}
?>

Muchas gracias de antemano por sus respuestas.

Edito: En esta versión estoy usando Autocomplete de JQuery pero puede ser con un Select también.

solución

Tomé prestada unas respuestas de stackOverflow en inglés que me ayudaron mucho, así que pondré cómo las adapté a mi problema:

Utilicé el atributo data y en donde hago mi select asigno a una variable cada registro que deseo llenar en el formulario:

Consulta de sql con la que se llena el select inicial y obtiene los campos en un data

$stmt=sqlsrv_query($dbcon, $sql);
                if($stmt==false){
                    die(print_r(sqlsrv_errors(), true));
                }

                while ($row=sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
                 $clave_ct_necesidad = $row['clave_ct_necesidad'];
                 $clave_ct_nomina = $row['clave_ct_nomina'];
                 $clave_ct_analitico = $row['clave_ct_analitico'];
                 $qna_ini=$row['qna_ini'];
                $qna_fin=$row['qna_fin'];
                    $asignatura=$row['asignatura'];
                    $observaciones=$row['observaciones'];

                    echo "<option data-clave_ct_necesidad='".$row['clave_ct_necesidad']."' data-clave_ct_nomina='".$row['clave_ct_nomina']."' data-clave_ct_analitico='".$row['clave_ct_analitico']."' data-qna_ini='".$row['qna_ini']."' data-qna_fin='".$row['qna_fin']."' data-asignatura='".$row['asignatura']."' data-observaciones='".$row['observaciones']."' value='".$row['plaza']."'> ". $row['plaza']."</option>";


 }

Y luego genero una función en Javascript que toma los datos almacenados en cada data y los llena en el campo correspondiente:

Función de Javascript que toma los data y los asigna al campo de texto

function updateinput(e) {
     var selectedOption = e.options[e.selectedIndex];
     document.getElementById('clave_ct_necesidad').value = selectedOption.getAttribute('data-clave_ct_necesidad');
     document.getElementById('clave_ct_nomina').value = selectedOption.getAttribute('data-clave_ct_nomina');
     document.getElementById('clave_ct_analitico').value = selectedOption.getAttribute('data-clave_ct_analitico');
     document.getElementById('qna_ini').value = selectedOption.getAttribute('data-qna_ini');
     document.getElementById('qna_fin').value = selectedOption.getAttribute('data-qna_fin');
     do
        cument.getElementById('asignatura').value = selectedOption.getAttribute('data-asignatura');
     document.getElementById('observaciones').value = selectedOption.getAttribute('data-observaciones');
    }

Y me funcionó perfectamente. Espero sea de utilidad para alguien más.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *