Rellenando las opciones de un Elemento Datalist de formulario utilizando Ajax+JavaScripty JSON

En este Howto vas a aprender como rellenar un elemento datalist de HTML5 recibiendo los datos en formato JSON. Para ello vamos a utilizar HTML5 y JavaScript

Cómo funciona el elemento datalist

El elemento de HTML5 (<datalist>), permite crear una lista de opciones (<option>) para un elemento <input> de formulario. Por lo que cuando el usuario se dispone a rellenarlo este se autocompletará automáticamente con las opciones del (<datalist>).

Creando el formulario

Lo primero que vamos a realizar es crear un formulario básico con el que poder trabajar. Veamos cuales son los elementos necesarios para hacer que nuestro ejemplo funcione correctamente.

  • Un elemento (<input>) donde el usuario incluirá su departamento.
  • El elemento (<datalist>) del que se nutrirá el elemento (<input>) y al que más adelante haciendo uso de JavaScript le iremos incluyendo todas las opciones (<option>) disponibles.
  • También vamos a hacer uso del framework Bootstrap4 para poder estilar los campos.

Eventos y funciones de JavaScript

El siguiente paso es crear un evento que nos permita rellenar las opciones del (<datalist>) leyendo los datos de un fichero JSON.  Voy a explicar paso a paso este proceso para que se entienda un poco mejor:

  • En primer lugar creamos un evento load que dispara una vez termine de cargar la página.
  • Vamos a utilizar AJAX y el objeto XMLHttpRequest para realizar la petición del fichero JSON. Uso AJAX porque es un código mucho más limpio y tampoco quiero hacer uso de librerías externas que sobrecarguen aún más la página.
  • Una vez AJAX inicia la petición y solicita los datos en formato JSON realizamos una llamada a la  función addToDataList() la cual se encarga de crear y completar cada elemento (<option>) del (<datalist>).

Opcionalmente podemos modificar la solicitud AJAX para que por ejemplo mediante programación PHP lea los datos procedentes de una base de datos para posteriormente devolverlos en formato JSON.

El fichero JSON del cual vamos a leer los datos del ejemplo, es el siguiente:

 

El ejemplo funcionando se puede ver y descargar en este enlace.

Etiquetado

Deja un comentario

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