A search list component that filters items based on user input using fuzzy search. Filters items by matching against their text content and data-keywords attribute.
Features debounced input handling and accessible screen reader announcements for search results.
Basic Usage
JavaScript
TypeScript
Python
Rust
Go
No matching languages found
Start typing to search programming languages
Code
<m-search-list>
<input slot="controller" type="search" placeholder="Search programming languages..." />
<div data-keywords="javascript js ecmascript">JavaScript</div>
<div data-keywords="typescript ts">TypeScript</div>
<div data-keywords="python py">Python</div>
<div data-keywords="rust rs">Rust</div>
<div data-keywords="go golang">Go</div>
<p slot="empty">No matching languages found</p>
<p slot="initial">Start typing to search programming languages</p>
</m-search-list>With Target Selector
- Apple
- Banana
- Orange
- Kiwi
- Grape
No fruits match your search
Code
<m-search-list target="ul">
<input slot="controller" type="search" placeholder="Search fruits..." />
<div>
<ul>
<li data-keywords="red delicious">Apple</li>
<li data-keywords="yellow curved tropical">Banana</li>
<li data-keywords="citrus orange vitamin-c">Orange</li>
<li data-keywords="green kiwifruit">Kiwi</li>
<li data-keywords="purple seedless">Grape</li>
</ul>
</div>
<p slot="empty">No fruits match your search</p>
</m-search-list>Custom Debounce
Item 1
Item 2
Item 3
Item 4
Item 5
Code
<m-search-list debounce="500">
<input slot="controller" type="search" placeholder="Search with 500ms debounce..." />
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</m-search-list>Using Css States
Apple
Banana
Cherry
No results
Type to search
Code
<m-search-list class="box" data-padded="true">
<input slot="controller" type="search" placeholder="Search to see state changes..." />
<div>Apple</div>
<div>Banana</div>
<div>Cherry</div>
<p slot="empty">No results</p>
<p slot="initial">Type to search</p>
</m-search-list>
<style>
m-search-list:state(empty) {
border: 2px solid var(--color-error);
}
m-search-list:state(match) {
border: 2px solid var(--color-success);
}
m-search-list:state(initial) {
border: 2px solid var(--color-border);
}
</style>- target string —
- CSS selector for the container element
- debounce number 150
- Time in milliseconds to debounce input events
- emptySlotHasContent — —
- initialSlotHasContent — —
- input HTMLInputElement | null —
- The input element used for search
- items Element[] —
- Array of filterable items
- adoptedStyleSheets array [baseStyleSheet]
- filter void
- Programmatically filter items based on the current input value. This can be called to force an immediate filter update without waiting for debounce.
- render void
- controller
- Slot for the input element that controls the search
- (default)
- Slot for the list container and items to be filtered
- empty
- Optional content to display when no items match the search query
- initial
- Optional content to display before any search query is entered