Searchable Select WebComponent

Javascript 74,9%

CSS 25,1%

The Searchable Select Web Component is an advanced tool that transforms a traditional <select> element into a dropdown with an integrated search feature. This web component is ideal for forms containing long lists of options, such as lists of countries, states, or categories, allowing users to filter and search for options quickly and easily. Its integration is simple and offers various customization options through CSS, making it highly adaptable to different designs and applications.

Live Demo

Main Features

Real-Time Search: Facilitates option searching as the user types in the input field.

Customizable Design: Easily customize the component’s appearance using CSS classes or defining your own styles.

Lightweight and Easy to Integrate: Add the component to your HTML and wrap the <select> element to start using it immediately.

How to Integrate Searchable Select

To use the component, you must include the CSS from the dist folder and the JavaScript file in your project. The JavaScript import doesn’t include the styles, so the CSS file must be added manually.

HTML Import

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

JavaScript/TypeScript Import

import '@salvadorsru/searchable-select';

Note: The JavaScript import does not include CSS. Make sure to include the styles file from the dist folder.

Usage Examples

Basic Usage

Defining the component statically is simple. Just add the <searchable-select> element that wraps an input field and the <select> with the options:

<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>

Dynamic Input

If you prefer the component to automatically generate the search field, you can omit the <input>. You can also modify the aria-label and placeholder directly from the custom element:

<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>

Accessibility Considerations

By default, the component’s styles hide the original select element over the input field to show native form validation errors. To show the select as an alternative option if JavaScript is disabled, add the following code to your page:

<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>

Style Customization with CSS Variables

To adapt the component’s design to your project’s aesthetics, you can modify the following CSS variables:

--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 */;

These options make the Searchable Select Web Component an excellent choice for improving usability in web applications that handle large data sets in forms. Thanks to its modular design and customization capabilities, you can easily adapt it to your project’s style and needs. Try this powerful tool and transform the user experience in your forms!