Ejemplo de select autocompletado para un formulario con AngularMaterial y Angular Universal

Cuando programamos un formulario en una web y necesitamos incluir una serie de opciones en una etiqueta select es muy interesante añadir la funcionalidad de autocompletar. De esta forma podemos agilizar la introducción de datos y, por lo tanto, mejorar la experiencia de nuestros usuarios.

En este tutorial os vamos a enseñar a reproducir el siguiente formulario:

Por qué el autocompletado mejora un formulario

Un select tradicional funciona bien con cinco o diez opciones, pero se vuelve lento cuando la lista crece. El autocompletado permite escribir unas letras, reduce ruido visual y evita obligar al usuario a recorrer una lista demasiado larga.

En proyectos reales este patrón encaja con departamentos, ciudades, productos, clientes, etiquetas o cualquier catálogo donde el valor debe salir de datos controlados pero la experiencia necesita búsqueda rápida.

Podéis descargar el formulario del ejemplo anterior en el siguiente repositorio https://github.com/al118345/formulario-angular-autocompletado-con-angular-universal

Instalación Angular Material

Lo ideal es realizar una instalación limpia con el siguiente comando:

ng add @angular/material

Ahora bien, seguramente no os va a funcionar. Si se produce un error en la instalación os recomiendo realizar la siguiente instalación

npm install @angular/material --force --save

Una vez instalado, en el fichero angular.json tenemos que añadir el fichero css de angular material en el apartado style

Una vez tenemos los estilos, ahora toca añadir los imports necesarios en el fichero app.module.ts de la siguiente forma:

Ejemplo de formulario

Una vez instalado, quedará añadir al componente.ts el siguiente código:

Mediante este código gestionaremos el select autocompletado. La función mat_filter, es la que se encarga de realizar la búsqueda dentro del array.

Y en la vista aplicamos la siguiente implementación:

Esta vista simplemente asocia cada uno de los componente con las variables y las funciones necesarias para realizar las tareas del autocompletado.

Angular Universal y renderizado del formulario

El ejemplo mantiene el formulario principal, la etiqueta y la explicación del código en el HTML inicial, de forma que la página sigue siendo comprensible para buscadores antes de que el navegador hidrate la interacción de Angular Material.

Mejoras prácticas para producción

En un formulario real conviene validar el valor seleccionado, mostrar un mensaje cuando no haya coincidencias, evitar cargar catálogos enormes en el primer bundle y consultar al backend si la lista contiene miles de registros.

Detalles de accesibilidad

El campo debe mantener una etiqueta clara, navegación por teclado y un comportamiento de foco previsible. El autocompletado acelera a usuarios expertos, pero también debe ser comprensible para quien navega con teclado o tecnología de asistencia.

Guías Angular relacionadas

Este ejemplo conecta con los artículos de routing y APIs en Angular porque los formularios suelen necesitar rutas rastreables, validación, datos de backend y carga de componentes compatible con SSR. routing Angular, APIs en Angular.