Autocompletar varios inputs a través de un input: Resuelto
Autocompletar varios inputs a través de un input. En este artículo veremos el uso de jQuery para rellenar varios campos de texto usando el componente autocomplete de jQuery. La instalación es muy sencilla y detallaremos paso a paso.
La implementación de este modelo de procesos es muy recomendable para cualquier sistema y/o página web que desee recopilar información y almacenarlo en una base de datos.
Autocompletar varios inputs a través de un input
Prosiguiendo responderemos algunas preguntas frecuentes acerca del sistema autocompletar.
¿Cómo funciona este sistema autocompletar?
Un ejemplo concreto seria la búsqueda de productos y poder recuperar varios detalles del producto para poder almacenarlo en MySQL. A continuación, detallaremos la secuencia de uso del sistema.
Para este ejemplo usaremos una base de datos con registros de personal. Por lo tanto, al digitar el nombre de personal nos mostrará una lista de posibles resultados y al hacer clic en el registro correcto se autocompletará automáticamente los demás datos en varias cajitas de texto que estarán visibles al usuario y también almacenarlo en otra tabla.
Los campos que se auto complementarán serán los siguientes:
- Usuario
- Nombres
- Apellidos
A continuación, mostraremos una captura de pantalla sobre su ejecución del código.
ESTRUCTURA DE NUESTRO SISTEMA AUTOCOMPLETAR
Siguiendo con la explicación ahora veremos los componentes de nuestro sistema.
1. Contenido de nuestra base de datos: php_validarusuario.sql
Este fichero contiene la tabla en el cual se almacenará la información que después será extraída por el input para autocompletar.
CREATE TABLE IF NOT EXISTS `usuarios` ( `idUser` int(11) NOT NULL, `Usuario` varchar(100) DEFAULT NULL, `Password` varchar(100) DEFAULT NULL, `Nombres` varchar(100) DEFAULT NULL, `Apellidos` varchar(100) DEFAULT NULL, `Email` varchar(150) DEFAULT NULL ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8; INSERT INTO `usuarios` (`idUser`, `Usuario`, `Password`, `Nombres`, `Apellidos`, `Email`) VALUES (1, 'caflores', '894578', 'Carlos', 'Flores', 'carlos@gmail.com'), (2, 'camila', '346622', 'Camila', 'Giron', 'maria@gmail.com'), (3, 'ad45di', '124152', 'Carina', 'Caceres', 'henry@gmail.com'), (4, 'angeldb', '985820', 'Candy', 'Cotrina', 'angel@gmail.com'); ALTER TABLE `usuarios` ADD PRIMARY KEY (`idUser`); ALTER TABLE `usuarios` MODIFY `idUser` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=5;
2. Conexión con la base de datos: dbcontroller.php
Lo más importante es definir la conexión con la base de datos, a diferencia de nuestro anterior post, aquí vamos a conectar usando la clase llamada DBController.
<?php class DBController { private $host = "localhost"; private $user = "root"; private $password = "root"; private $database = "php_validarusuario"; private $conn; function __construct() { $this->conn = $this->connectDB(); } function connectDB() { $conn = mysqli_connect($this->host,$this->user,$this->password,$this->database); return $conn; } function runQuery($query) { $result = mysqli_query($this->conn,$query); while($row=mysqli_fetch_array($result)) { $resultset[] = $row; } if(!empty($resultset)) return $resultset; } function insertQuery($query) { mysqli_query($this->conn, $query); $insert_id = mysqli_insert_id($this->conn); return $insert_id; } function getIds($query) { $result = mysqli_query($this->conn,$query); while($row=mysqli_fetch_array($result)) { $resultset[] = $row[0]; } if(!empty($resultset)) return $resultset; } function numRows($query) { $result = mysqli_query($this->conn, $query); $rowcount = mysqli_num_rows($result); return $rowcount; } } ?>
3. Crear una función para realizar una bùsqueda
Viendo este ejemplo solo queremos autocompletar varias cajas con la búsqueda de personal. Esta búsqueda se ejecutará cuando vayamos tecleando. Sin embargo, nos apoyaremos en una función jQuery.
<script type="text/javascript"> $(function() { $("#curso").autocomplete({ source: "Personal.php", minLength: 2, select: function(event, ui) { event.preventDefault(); $('#curso').val(ui.item.Nombres); $('#idx').val(ui.item.idx); $('#usuarios').val(ui.item.usuarios); $('#nombres').val(ui.item.nombres); $('#apellidos').val(ui.item.apellidos); $('#email').val(ui.item.email); $("#curso").focus(); } }); }); </script>
4. Librerias y framework eternos
Usaremos librerías externas para lograr nuestro anhelado objetivo
<!-- Bootstrap core CSS --> <link href="dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="assets/sticky-footer-navbar.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
5. Formulario optimizado para la búsqueda
A partir de este formulario se iniciara la búsqueda de la palabra clave.
<form> <div class="form-group"> <div class="username"> <label for="ComprobarUsuario">Nombres para el ejemplo: <strong>Carlos</strong>, <strong>Camila</strong>, <strong>Candy</strong>, <strong>Carina</strong></label> <input autofocus class="form-control input-medium ui-autocomplete-input" value="" style="width:300px; text-align:center; font-size:12px; margin-right:10px; text-transform:uppercase" autocomplete="off" id="curso" name="curso" type="text"> </div> </div> </form>
6. Tabla HTML donde se mostrarán los datos de la base de datos
Es esta tabla escrita en el lenguaje HTML5 y con la ayuda de la librería BootStrap mostraremos los resultados para autocompletar input de manera dinámica.
<table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Usuario</th> <th scope="col">Nombres</th> <th scope="col">Apellidos</th> <th scope="col">Email</th> </tr> </thead> <tbody> <tr> <th scope="row"><input readonly class="caja" value="" id="idx" type="text"></th> <td><input readonly class="caja" value="" id="usuarios" type="text"></td> <td><input readonly class="caja" value="" id="nombres" type="text"></td> <td><input readonly class="caja" value="" id="apellidos" type="text"></td> <td><input readonly class="caja" value="" id="email" type="text"></td> </tr> </tbody> </table>
Instalación del código autocompletar varios inputs
a) Crear su base de datos con el nombre «php_validarusuario»
b) Importar la tabla usuarios a la base de datos
c) Vincular la conexión en el fichero dbcontroller.php
CONCLUSIÓN
Hoy en día con el avance de la tecnología en el mundo web va creciendo muy rápidamente, es por tal motivo tenemos que estar en la vanguardia de los últimos avances.
En este artículo veremos cómo implementar un autocompletar sin tener que refrescar el navegador. Por lo tanto, este evento es muy recomendado para nuestros sistemas web.
Su implementación es muy sencilla. Ahora su uso es muy recomendado.
DESCARGA
Les dejare un comprimido donde estará todos los ficheros requeridos para este ejemplo más la base de datos.
Descargar Ahora