Autocompletado de campos de forma automática usando JavaScript+Ajax, PHP y MySQL.

En este HowTo aprenderás cómo se pueden autocompletar campos con datos que se van recibiendo datos de una base de datos MySQL.  Para ello usaremos HTML5Bootstrap4 y CSS, JavaScript+Ajax+JSON y PHP7+MySQL 5.6

Qué necesitamos para poder implementar este ejercicio:

  • HTML5 básico para crear el formulario de búsqueda.
  • CSS y Bootstrap4 para maquetar tanto el formulario como resultados.
  • JavaScript para crear las propiedades y eventos y Ajax para realizar la petición al servidor.
  • PHP7 para recibir los datos del formulario y PDO (PHP Data Objects) para crear la conexión y consulta a la base de datos MySQL 5.6.
  • JSON que será el formato de transferencia de datos estándar para que se puedan leer los datos recibidos con JavaScript.

El ejemplo funcionando se puede visualizar aquí:

Creación del Formulario

Empezaremos con lo más básico pero fundamental para que el usuario pueda interactuar con el campo de búsqueda. Recuerda no olvidar introducir los valores de los atributos id y name del elemento <input>.

JavaScript y Ajax

Para que el autocompletado funcione correctamente vamos a seguir una serie de pasos que explicaré a continuación:

  • Primeramente necesitamos crear un evento keyup que se activa cuando el usuario presiona cualquier tecla dentro del elemento <input> del formulario.
  • Realizamos una comprobación para saber si ya hemos creado el elemento HTML5 de lista <ul> donde se van a imprimir las coincidencias que se van encontrando. Por lo que si no existe la lista la creamos.
  • A continuación realizamos una llamada Ajax asíncrona que envía los datos que va introduciendo el usuario al servidor. Con cada pulsación del tecla realiza una petición.
  • Recibiremos los datos en formato JSON y con un bucle los vamos recorriendo para poder crear cada elemento <li> de la lista que creamos con anterioridad.

Programación del lado del servidor

Para recibir los datos del formulario usamos PHP7. Para crear la conexión y la consulta a la base de datos MySQL usaremos PDO (PHP Data Objects).

Aquí vamos a destacar los siguientes pasos:

  • El contenido devuelto por este fichero será en formato JSON por lo que tenemos que incluir la cabecera correcta (application/json).
  • El siguiente paso realizar la conexión a la base de datos MySQL usando PDO (PHP Data Objects).
  • Una vez recibimos la información que va tecleando el usuario, creamos una consulta a la tabla de la base de datos limitando los resultados a 5. Almacenamos los datos en un array y los devolvemos en formato JSON para que se puedan tratar usando JavaScript.

La tabla de la base de datos para realizar este ejercicio es muy simple: se llama empleados y contiene 2 campos: id y nombre.

Maquetación del formulario

Los resultados que iremos recibiendo se irán mostrando en un elemento lista <ul> por lo que incluiremos unos estilos para dejarlo bonito y que parezca que forma parte del mismo elemento <input>

 

 

Etiquetado

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.