Searchable Select WebComponent

Javascript 74,9%

CSS 25,1%

El Searchable Select Web Component es una herramienta avanzada que convierte un elemento <select> tradicional en un desplegable con buscador integrado. Este componente web es ideal para aquellos formularios que contienen largas listas de opciones, como listas de países, estados, o categorías, permitiendo a los usuarios filtrar y buscar opciones de forma rápida y sencilla. Su integración es simple y ofrece diversas opciones de personalización mediante CSS, lo que lo hace altamente adaptable a diferentes diseños y aplicaciones.

Prueba en Vivo

Principales Características

Búsqueda en Tiempo Real: Facilita la búsqueda de opciones a medida que el usuario escribe en el campo de entrada.

Diseño Personalizable: Personaliza el aspecto del componente fácilmente usando clases CSS o definiendo tus propios estilos.

Ligero y Fácil de Integrar: Agrega el componente en tu HTML y envuelve el elemento <select> para comenzar a usarlo de inmediato.

Cómo Integrar Searchable Select

Para utilizar el componente, debes incluir el CSS desde la carpeta dist y el archivo JavaScript en tu proyecto. La importación por JavaScript no incluye los estilos, por lo que el archivo CSS debe agregarse de forma manual.

Importación en HTML

<link rel="stylesheet" href="ruta/a/dist/style.min.css">
<script type="module" src="ruta/a/index.min.js"></script>

Importación en JavaScript/TypeScript

import '@salvadorsru/searchable-select';

Nota: La importación en JavaScript no incluye el CSS. Asegúrate de incluir el archivo de estilos desde la carpeta dist.

Ejemplos de Uso

Uso Básico

Definir el componente de forma estática es sencillo. Basta con añadir el elemento <searchable-select> que envuelve un campo de entrada y el <select> con las opciones:

<searchable-select>
    <input aria-label="Search countries" placeholder="Where are you from?">
    <select name="countries" id="countries">
        <option value="1">Argentina</option>
        <option value="2">Brazil</option>
        <option value="3">Canada</option>
        <option value="4">France</option>
        <option value="5">Germany</option>
        <option value="6">Japan</option>
    </select>
</searchable-select>

Entrada Dinámica

Si prefieres que el componente genere automáticamente el campo de búsqueda, puedes omitir el <input>. Puedes además modificar el aria-label y el placeholder directamente desde el elemento personalizado:

<searchable-select 
    aria-label="Search countries" 
    placeholder="Where are you from?">
    <select name="countries" id="countries">
        <option value="1">Argentina</option>
        <option value="2">Brazil</option>
        <option value="3">Canada</option>
        <option value="4">France</option>
        <option value="5">Germany</option>
        <option value="6">Japan</option>
    </select>
</searchable-select>

Consideraciones para Accesibilidad

Por defecto, los estilos del componente ocultan el elemento select original sobre el campo de entrada para mostrar errores de validación nativos del formulario. Para mostrar el select como opción alternativa si JavaScript está deshabilitado, añade el siguiente código en tu página:

<noscript>
    <style type="text/css"> :root {
            --searchable-select-input-display: none;
            --searchable-select-position: relative;
            --searchable-select-pointer-events: auto;
            --searchable-select-opacity: 1;
        } </style>
</noscript>

Personalización de Estilos con Variables CSS

Para adaptar el diseño del componente a la estética de tu proyecto, puedes modificar las siguientes variables CSS:

--searchable-select-border-color: /* #ccc */;
--searchable-select-position: /* absolute */;
--searchable-select-pointer-events: /* none */;
--searchable-select-opacity: /* 0 */;
--searchable-select-background-color: /* #fff */;
--searchable-select-option-hover: /* #f0f0f0 */;

Estas opciones hacen que el Searchable Select Web Component sea una excelente opción para mejorar la usabilidad en aplicaciones web que manejan grandes conjuntos de datos en formularios. Gracias a su diseño modular y capacidad de personalización, podrás adaptarlo sin problemas al estilo y necesidades de tu proyecto. ¡Prueba esta poderosa herramienta y transforma la experiencia de usuario en tus formularios!