A friend got in touch a while back looking for a little tool to drop into their company's website that could filter through a list of items using a text input. Sounds like a perfect scenario for a Web Component!
live-filter
The <live-filter> component, when wrapped around an <input> element and a set of <li> elements (or any elements with the help of the selector attribute) will allow people to search through those elements using the text value of the input. All elements will then receive a data attribute data-live-filter-match with a value or true or false depending on if they contain any matching strings. From there, CSS can be applied to highlight or hide elements depending on their matching result visually.
Features
This Web Component allows you to:
- Filter a list using a text input field
- Control how the filtering is presented by using CSS to hook into element attributes
data-live-filter-match="true"anddata-live-filter-match="false" - Adjust what items are filtered using the
selectorattribute on thelive-filterelement itself - Adjust the case sensitivity of searching using the
caseattribute on thelive-filterelement itself
Usage
The <live-filter> component can be used with the help of a script tag and wrapping it around an <input> element and a list of <li> elements (these can be safely be wrapped in a <ul> or similar element):
<script type="module" src="live-filter.js"></script>
<live-filter>
<label>Filter: <input type="search" aria-controls="list" /></label>
<ul role="region" id="list" aria-live="polite">
<li>African Violet</li>
<li>Aloe Tiger Plant</li>
<li>Aralia Ming</li>
<li>Autograph Tree</li>
</ul>
</live-filter>A reduced example of using live-filter in regular HTML
By using the selector attribute you can pick which elements are filtered through, this will override the default li as the selector:
<script type="module" src="live-filter.js"></script>
<live-filter selector="dt">
<label>Filter: <input type="search" aria-controls="data" /></label>
<dl role="region" id="data" aria-live="polite">
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
</live-filter>Example setting the selector option to select dt elements
By default, filtering is case-sensitive, but this can be changed using case="insensitive" like so:
<script type="module" src="live-filter.js"></script>
<live-filter case="insensitive">
<label>Filter: <input type="search" aria-controls="list" /></label>
<ul role="region" id="list" aria-live="polite">
<li>African Violet</li>
<li>Aloe Tiger Plant</li>
<li>Aralia Ming</li>
<li>Autograph Tree</li>
</ul>
</live-filter>Example setting the case option to change the search to be case insensitive
You can see all the above examples in a live demo here.
Further reading
If you'd like to try the Web Component for yourself or learn more about templating, you can check out the documentation and further examples on GitHub:
daviddarnes