1

muchas gracias por haberme ayudado con mis anteriores preguntas, me ha servido mucho su conocimiento, como he dicho en mis preguntas estoy aprendiendo sobre sistemas web y ahora me surge otra pregunta:

Resulta que tengo una base de datos de empleados en MySQL, y estoy registrando una información que hace referencia a incapacidades, ahora, en un campo donde se registra el nombre del empleado hago una consulta con el nombre completo del empleado y se autocompleta como lo necesito, pero, me gustaría que en otros campos como por ejemplo cédula o número de identificación se autocomplete de acuerdo con el nombre del empleado, para ser mas exactos si yo coloco en nombres Pepito Pérez el campo de cédula se llene automaticamente con la cédula de Pepito Pérez, todo esto ya almacenado en la base de datos de empleados.

la sentencia con la cual hago el input del nombre esta ligada a un script que me ayuda a autocompletar que es este:

<input name="nombres" id="nombres" class=" form-control span8 tip" type="text" required/>

Y el Script que según el id de ese input me autocompleta con busqueda es este:

        <script>
            $(document).ready(function () {
                $('#nombres').typeahead({
                    source: function (busqueda, resultado) {
                        $.ajax({
                            url: "consulta.php",
                            data: 'busqueda=' + busqueda,        
                            dataType: "json",
                            type: "POST",
                            success: function (data) {
                                resultado($.map(data, function (item) {
                                    return item;
                                }));
                            }
                        });
                    }
                });
            });
        </script>

Y tengo un archivo de colsulta.php donde realizo la consulta al respecto:

<?php
include("conn.php");
$palabraclave = strval($_POST['busqueda']);
$busqueda = "{$palabraclave}%";
$consultaDB = $conn->prepare("SELECT * FROM clientes WHERE nombres LIKE ?");
$consultaDB->bind_param("s",$busqueda);         
$consultaDB->execute();
$resultado = $consultaDB->get_result();
if ($resultado->num_rows > 0) {
    while($registros = $resultado->fetch_assoc()) {
    $nombres[] = $registros["nombres"];
    }
    echo json_encode($nombres);
    }
$consultaDB->close();
?>

Entonces, no sé que podrían sugerirme para que los input que necesito que se llenen automaticamente lo hagan y el registro de estas incapacidades sea mucho más fácil y que se eviten errores al digitar.

Cualquier idea o ayuda será bienvenida, como también si necesitan algo mas del código pueden decirme.

Muchas gracias a todos y que tengan un buen día.

1 respuesta 1

2

Creo que la mejor opción es recibir desde PHP todos los datos necesarios para administrar el usuario y debes configurar algunas opciones de Typeahead:

  • display - Para especificar la propiedad que se mostrará y donde se realizarán las búsquedas
  • template - Para crear el formato con el que se mostrarán los resultados, usando atributos de datos para guardar temporalmente la información adicional que requieras y se pueden acceder con $(elemento).data('nombre-de-atributo')
  • callback -> onClickAfter - Para detectar cuando se seleccione una opción y poder actualizar otros elementos

En este fragmento de código no es necesario acceder a los atributos de datos, porque Typeahead usa el objeto del arreglo al ejecutar la función onClickAfter; de cualquier forma, lo dejo como referencia.

let data = [
    {nombres: 'Juan Pérez', cedula: 'abc123456789' },
    {nombres: 'José Gómez', cedula: 'xyz987654321' },
];
$(document).ready(function() {
    $('#nombres').typeahead({
        minLength: 1,
        maxItem: 10,
        // Definir propiedades que se van a mostrar y donde se hará la búsqueda
        display: ['nombres'],
        // Formato de resultados
        template: `<span data-cedula="{{cedula}}">{{nombres}}</span>`,
        // Origen de datos
        source: {data: data},
        callback: {
            // "Escuchar" clics en elementos de resultados
            onClickAfter: function (node, a, item, event) {
                // Actualizar valor de cédula
                $('#cedula').val(item.cedula);
            }
        }
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>

<form id="form-country_v2" name="form-country_v2">
    <div class="typeahead__container">
        <div class="typeahead__field">
            <div class="typeahead__query">
                Nombre: <input type="text" id="nombres" placeholder="Buscar">
            </div>
            <div class="typeahead__button">
                <button type="submit">
                    <i class="typeahead__search-icon"></i>
                </button>
            </div>
        </div>
    </div>
    <div>
        Cédula: <input type="text" id="cedula">
    </div>
</form>

¿Qué necesitas cambiar?

Debes actualizar el código PHP para generar el arreglo con la información que vayas a usar para actualizar otros campos:

<?php
include("conn.php");
// Evita posibles errores definiendo antes el arreglo
$nombres = [];

$palabraclave = strval($_POST['busqueda']);
$busqueda = "{$palabraclave}%";
// En lugar de SELECT *, solicita solo los campos necesarios
$consultaDB = $conn->prepare("SELECT nombres, cedula FROM clientes WHERE nombres LIKE ?");
$consultaDB->bind_param("s",$busqueda);         
$consultaDB->execute();
$resultado = $consultaDB->get_result();
if ($resultado->num_rows > 0) {
    while($registros = $resultado->fetch_assoc()) {
        // Agrega todo el registro, solo contiene los campos seleccionados en la consulta
        $nombres[] = $registros;
    }
}
// Siempre debes devolver un JSON, aunque sea arreglo vacío si no hay resultados
echo json_encode($nombres);
$consultaDB->close();

El resultado va a ser como el arreglo data del fragmento de código. Ahora, solo necesitas adaptar tu Javascript, dejando que Typeahead ejecute la petición AJAX y se configura de la misma forma que las peticiones de jQuery. Referencia: Typeahead -> opciones -> source:

        $(document).ready(function () {
            $('#nombres').typeahead({
                minLength: 1,
                maxItem: 10,
                display: ['nombres'],
                template: `<span data-cedula="{{cedula}}">{{nombres}}</span>`,
                source: { data: {
                    // Propiedad, no función, Typeahead hará la petición
                    ajax: {
                        // Misma configuración que $.ajax()
                        url: 'consulta.php',
                        data: 'busqueda=' + busqueda,
                        dataType: 'json',
                        type: 'POST'
                        // No es necesario "success:", a menos que quieras cambiar algo
                    }
                }},
                callback: {
                    onClickAfter: function (node, a, item, event) {
                        $('#cedula').val(item.cedula);
                    }
                }
            });
        });

Probablemente vayas a necesitar agregar algún otro campo de la tabla, tal vez ID, pero eso ya queda a tu criterio.

1
  • Excelente aporte, me ha servido, muchas gracias. el 5 abr. 2021 a las 14:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.