Blog, Pruebas de Proyecto

Domina el Autocompletado en Formularios con JavaScript Puro

En la era digital actual, la experiencia del usuario en la web es crucial para el éxito de cualquier proyecto. Una de las funciones que significantivamente mejoran esta experiencia en los formularios web es el autocompletado. Esta funcionalidad no solo agiliza el proceso de llenado de datos, sino que también mejora la precisión de la información ingresada. En esta guía te mostraré cómo implementar un sistema de autocompletado utilizando únicamente JavaScript, sin depender de librerías adicionales.

Índice de contenido

¿Qué es una Función de Autocompletado?

El autocompletado es una característica de interfaz de usuario que predice el resto de una palabra o frase mientras el usuario comienza a escribir en un campo de formulario. Esto no solo acelera la entrada de datos, sino que también ayuda a evitar errores de escritura y mejora la usabilidad.

Pasos Iniciales: Preparando tu Proyecto

Antes de sumergirnos en el código, asegúrate de tener un ambiente adecuado para el desarrollo. Necesitarás lo siguiente:

Editor de Código: Puedes utilizar editores como VSCode o Sublime Text.
Navegador Moderno: Chrome, Firefox o cualquier navegador que soporte JavaScript moderno.
Consola de desarrollo: Accesible en la mayoría de los navegadores para probar y depurar tu código.

Una vez que tienes todo listo, crea una nueva carpeta para tu proyecto y dentro, un archivo llamado index.html y otro llamado script.js.

Estructura Inicial de tu HTML

A continuación, construiremos la estructura básica de tu archivo index.html. Aquí te dejo un ejemplo inicial:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formulario con Autocompletado</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="autocomplete-container">
        <input id="autocomplete-input" type="text" placeholder="Escribe algo...">
    </div>
    <script src="script.js"></script>
</body>
</html>

Asegúrate de que el script JS se cargue al final del cuerpo para que todo el contenido HTML esté disponible antes de que el JavaScript intente acceder a él.

Implementando el Autocompletado con JavaScript

Paso 1: Crear la Función Base

En tu archivo script.js, vamos a comenzar desarrollando una función que escuche cada tecla presionada en el input y comience a filtrar sugerencias basadas en la entrada del usuario.

document.addEventListener('DOMContentLoaded', function() {
    const inputData = ["Apple", "Banana", "Cherry", "Date", "Fig", "Grape", "Lemon"];

    const inputField = document.getElementById('autocomplete-input');

    inputField.addEventListener('input', function() {
        let input = this.value;
        if (!input) {
            limpiarSugerencias();
            return;
        }

        let suggestions = getMatches(inputData, input);
        mostrarSugerencias(suggestions, this);
    });
});

function getMatches(data, input) {
    let matches = [];
    let regex = new RegExp(`${input}`, 'i'); // 'i' para ignorar mayúsculas/minúsculas
    for (let i = 0; i < data.length; i++) {
        if (data[i].match(regex)) {
            matches.push(data[i]);
        }
    }
    return matches;
}

Paso 2: Mostrar Sugerencias

La función mostrarSugerencias() manipulará el DOM para mostrar las sugerencias posibles bajo el campo de entrada:

function mostrarSugerencias(suggestions, inputField) {
    limpiarSugerencias();
    let suggestionBox = document.createElement('div');
    suggestionBox.id = 'suggestion-box';
    inputField.parentNode.appendChild(suggestionBox);

    suggestions.forEach(function(item) {
        let div = document.createElement('div');
        div.innerHTML = item;
        div.addEventListener('click', function() {
            inputField.value = this.innerText;
            limpiarSugerencias();
        });
        suggestionBox.appendChild(div);
    });
}

function limpiarSugerencias() {
    const existingBox = document.getElementById('suggestion-box');
    if (existingBox) {
        existingBox.parentNode.removeChild(existingBox);
    }
}

Paso 3: Estilizando el Autocompletado

Añade el archivo styles.css para mejorar visualmente las sugerencias y asegurarte de que los usuarios tengan una buena experiencia visual y funcional.

.autocomplete-container {
    position: relative;
    width: 300px;
    margin: 0 auto;
}

#suggestion-box {
    position: absolute;
    background: white;
    width: 100%;
    border: 1px solid #ccc;
}

#suggestion-box div {
    padding: 8px;
    cursor: pointer;
}

#suggestion-box div:hover {
    background-color: #f0f0f0;
}

Conclusión

Implementar una función de autocompletado en tus formularios web puede parecer complejo, pero con un poco de JavaScript, es perfectamente posible hacerlo sin dependencia de bibliotecas externas. Ahora que tienes una función de autocompletado básica, puedes adaptarla y mejorarla para que se ajuste a las necesidades específicas de tus proyectos web.

Si quieres profundizar más en JavaScript o tienes cualquier consulta, no dudes en visitar mi blog o contactarme a través de mi página de contacto. Estoy aquí para ayudarte en tu camino hacia el dominio del desarrollo web.

¡Feliz codificación!