Lograr una buena experiencia de usuario en nuestra web o aplicación es muy importante. Esta es una de las razones principales por las que nuestros visitantes regresarán muchas veces y nos recomendarán a sus contactos. Los formularios forman parte de esta experiencia y, por esta razón, debemos facilitar su llenado y asegurarnos de que todo fluya sin problemas y lo mejor posible. En este artículo vamos a revisar las siguientes librerías que nos ayudarán a autocompletar nuestros formularios:
- Typeahead.js
- Chosen
- Autocomplete Table
- EasyAutocomplete
- Awesomplete
Twitter Typehead Js
Typehead JS es una herramienta que pertenece a Twitter; y lo emplea en su aplicación web para la búsqueda de contactos, hashtags, etc. Y tal como lo hizo con Bootstrap, la pone al alcance de los desarrolladores. Para obtenerla debemos ir a la página de descarga de Twitter. Ahora veamos un ejemplo práctico. Digamos que queremos autocompletar un input text obteniendo las opciones desde un archivo JSON. Entonces, agregamos lo siguiente: En el código explico en comentarios lo que hace cada elemento. [js] $(function(){ $(’#my-input’).typeahead({ // Nombre del Array de datos name: ‘colores’, // Ubicación del archivo JSON prefetch: ‘data/colores.json’, // Cantidad de elementos a mostrar en la lista de autocompletado limit: 10 }); }); [/js] Y nuestro input tex, lo definimos así: [html] <input id=“my-input” class=“typeahead form-control” type=“text” placeholder=“Ex: Rojo”> [/html] Y así de fácil podemos autocompletar los cuadros de textos en nuestros formularios. Al final de este artículo encontrarás el demo de este ejemplo y el repositorio de Git para descargar el código.
Chosen
Esta librería nos trae un autocompletado de selects o listas desplegables con opciones para elegir. Para obtener Chosen debemos ir a su página de descarga. Para usar la librería y autocompletar nuestros formularios con Chosen primero agregamos: [js] $(function() { // El nombre de la clase del campo select en donde aplicaremos el autocompletado $(’.chosen-select’).chosen(); // Simple acción para Deseleccionar $(’.chosen-select-deselect’).chosen({ allow_single_deselect: true }); }); [/js] Y ahora, en nuestro elemento de formulario tipo select: [html] <select data-placeholder=“Ej: Rethink DB, Ruby” name=“paisesv” id=“paisesv” class=“chosen-select” multiple="" tabindex=“4” required=""><option value=“nodejs”>Node Js</option><option value=“iojs”>IO JS</option><option value=“python”>Python</option><option value=“ruby”>Ruby</option><option value=“PHP”>PHP</option><option value=“javascript”>Javascript</option><option value=“java”>Java</option><option value=“html5”>HTML 5</option><option value=“css3”>CSS 3</option><option value=“mysql”>MySQL</option><option value=“mongodb”>Mongo DB</option><option value=“rethinkdb”>Rethink DB</option><option value=“SEO”>SEO</option><option value=“otros”>Otros</option></select> [/html] Es un complemento muy útil para Bootstrap que mejora la experiencia para los usuarios.
Autocomplete Table
Esta librería auto completa nuestros campos de formulario con una característica muy útil: muestra una tabla con otros detalles sobre el elemento que estamos seleccionando. Se podría decir que es un nivel más avanzado; ya que nos permite agregar o quitar columnas de información dentro de la tabla. Puedes obtener Autocomplete Table en su página de descarga. Si deseamos utilizarla, agregamos la siguiente función: [js] $(document).ready(function () { // Seleccionamos el input text con id lpf var lista = $("#lpf").tautocomplete({ // Seleccionamos las columnas a mostrar en la tabla columns: [‘Lenguaje’, ‘Codigo’, ‘Nivel’, ‘Demanda’], ajax: { // hacemos referencia a la ubicación del archivo JSON url: “data/conocimientos.json”, type: “GET”, data: function () { return [{ test: lista.searchdata() }]; }, success: function (data) { // Filtramos la Búsqueda var filterData = []; var searchData = eval("/" + lista.searchdata() + “/gi”); // Buscamos por nombre del Lenguaje de Programación $.each(data, function (i, v) { if (v.lenguaje.search(new RegExp(searchData)) != -1) { filterData.push(v); } }); // Retornamos la búsqueda return filterData; } }, }); }); [/js] Ahora en nuestra vista agregamos nuestro elemento html: [html] <input type=“text” id=“lpf”> [/html] Esta librería es una de las mejores cuando se trata de ayudar al usuario a elegir. Esto porque muestra columnas aledañas de información.
Easy Autocomplete
Esta es una de las más fáciles de configurar y cuenta con diversas opciones. Entre ellas, destacan las opciones para autocompletar países con su bandera, autocompletar emails; usar un buscador externo como Duck Duck Go para autocompletar el cuadro de texto, entre otras. Si tienes tiempo de revisarla con calma, verás que tiene muchas otras cosas interesantes. Puedes obtenerla desde su página de descarga. Y para usarla para autocompletar un email, por ejemplo, agrega el siguiente JavaScript: [js] var options = { // Hacemos referencia al archivo JSON con la data url: “data/personas.json”, // Le indicamos que busque por email getValue: “email”, template: { type: “description”, // Le pedimos que nos liste los contactos por Emails fields: { description: “email” } }, list: { // Le indicamos que haga una búsqueda según primeras letras que escribimos match: { enabled: true } }, // Tema de la librería theme: “plate-dark” }; // Le indicamos que liste los correos en el input con id data-email $("#data-email").easyAutocomplete(options); [/js] Ahora, en nuestra vista colocamos: [html] <input id=“data-email” type=“email” class=“form-control” required=""> [/html] Es una de las librerías más divertidas y con muchas funciones por descubrir.
Awesomplete
Se trata de una librería sumamente personalizable. Es decir, la podemos adaptar de acuerdo a nuestras necesidades o requerimientos. Puedes descargarla desde su página web. Ahora supongamos que queremos ingresar nuestro email personal en un formulario. Con esta librería, podemos elegir el servicio en el que está registrado nuestro correo. Es decir, si escribimos micorreo@hotmail.com, micorreo@gmail.com, etc. podemos elegir el servicio desde la misma lista. Estos aparecerán después del “@” al momento de ingresar los caracteres. Para lograrlo, agregamos el siguiente JavaScript: [js] // En esta variable indicamos que el elemento en donde se va listar los correos va ser de tipo email new Awesomplete($(‘input[type=“email”]’), { // Creamos una lista con los servicios de correo list: ["@aol.com", “@att.net”, “@comcast.net”, “@facebook.com”, “@gmail.com”, “@gmx.com”, “@googlemail.com”, “@google.com”, “@hotmail.com”, “@mac.com”, “@me.com”, “@mail.com”, “@msn.com”, “@live.com”, “@sbcglobal.net”, “@verizon.net”, “@yahoo.com”], item: function(text, input){ // Le decimos que los servicios aparezcan luego de presionar el arroba “@” var newText = input.slice(0, input.indexOf("@")) + text; return Awesomplete.$.create(“li”, { innerHTML: newText.replace(RegExp(input.trim(), “gi”), “<mark>><</mark>”), “aria-selected”: “false” }); }, filter: function(text, input){ return RegExp("^" + Awesomplete.$.regExpEscape(input.replace(/^.+?(?=@)/, ‘’), “i”)).test(text); } }); [/js] Ahora, en nuestra vista agregamos el campo de tipo email: [html] <input type=“email” class=“form-control” id=“email” required=""> [/html] Esta librería se puede adaptar a cualquier proyecto que estemos desarrollando. Como puedes ver, existen muchas opciones para elegir dependiendo de los requerimientos de nuestro proyecto. Puedes descargar el código de estos ejemplos en este repositorio en GIT. Y si quieres saber más acerca de cómo diseñar y maquetar sitios web, no te pierdas el curso de HTML5 y CSS3 en Platzi. Aprenderás Flexbox, preprocesadores CSS y media queries; y todo lo que necesitas para iniciar tu carrera de Front-end profesional. 
