JQuery biblioteca de JavaScript

Autocompletar varios inputs a través de un input: Resuelto

Photo of Nestor Tapia Nestor Tapia Send an email 1 septiembre, 2018Last Updated: 9 diciembre, 2023
4.621 3 minutos de lectura
Autocompletar varios inputs a través de un input Resuelto
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.

Tabla de contenidos

Autocompletar varios inputs a través de un input

Prosiguiendo responderemos algunas preguntas frecuentes acerca del sistema autocompletar.

Publicaciones relacionadas

¿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
  • Email

A continuación, mostraremos una captura de pantalla sobre su ejecución del código.

Cómo autocompletar varios input con jQuery PHP MySQL
Cómo autocompletar varios input con jQuery PHP MySQL

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

Autocompletar varios inputs a través de un input Resuelto
Autocompletar varios inputs a través de un input Resuelto

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

Publicaciones relacionadas:

  1. Autocompletar usando PHP/MySQL y jQuery
  2. Autocompletar con bootstrap PHP MySQL Ajax
  3. Autocompletar con jQuery, Mysql y PHP PDO
  4. Sistema de eventos con fullcalendar jQuery PHP
  5. Pasar el valor de un input a otro input con jQuery
  6. Como crear gráficos estadísticos con PHP, jQuery y xCharts
  7. Menú contextual personalizable para su aplicación con jQuery
  8. Registro y validación de usuarios con Ajax PHP y MySQL
  9. Cómo recortar imágenes usando jQuery y PHP
  10. ▷ Inputs dinámicos usando jQuery y PHP
  11. Buscador jQuery PHP MySQL usando Datatables
  12. Dividir y exportar en varios archivos en Excel con PHP
  13. Facebook me gusta con emoji usando PHP jQuery
  14. Agregar comentarios de edición mediante jQuery
  15. Eliminar registros con BootStrap Modal usando PHP & MySQL
Etiquetas
Photo of Nestor Tapia Nestor Tapia Send an email 1 septiembre, 2018Last Updated: 9 diciembre, 2023
4.621 3 minutos de lectura
Photo of Nestor Tapia

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.
Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad