Filter List

Table of Contents

Examples

Basic Usage
Tag Buttons

JavaScript Reference

Constructor
Requirements
FilterItem Attributes
Methods

Basic Usage

Wrap items in k-filter-item elements with a filter-keywords attribute inside a k-filter-list. Connect an input to filter() using the debounce utility to avoid filtering on every keystroke.

<input id=filterInput type=search placeholder='Filter...' />
<k-filter-list id=myFilterList>
  <k-filter-item class=d-b filter-keywords='apple fruit red'><a href=#>Apple</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='banana fruit yellow'><a href=#>Banana</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='cherry fruit red'><a href=#>Cherry</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='grape fruit purple'><a href=#>Grape</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='lemon citrus yellow fruit'><a href=#>Lemon</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='orange citrus fruit'><a href=#>Orange</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='strawberry fruit red'><a href=#>Strawberry</a></k-filter-item>
</k-filter-list>
<script type=module>
  import debounce from '../src/utils/debounce.js';
  const list = document.getElementById('myFilterList');
  document.getElementById('filterInput').addEventListener('input', debounce(e => list.filter(e.target.value)));
</script>

Use category buttons to filter the list. Each button stores its filter term in data-filter; clicking it activates that button and calls filter(). An empty string clears the filter and shows all items.

<div class='d-f gap mb' id=tagButtons><button class='btn primary' data-filter=''>All</button><button class=btn data-filter=red>Red</button><button class=btn data-filter=yellow>Yellow</button><button class=btn data-filter=citrus>Citrus</button></div>
<k-filter-list id=tagFilterList>
  <k-filter-item class=d-b filter-keywords='apple fruit red'><a href=#>Apple</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='banana fruit yellow'><a href=#>Banana</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='cherry fruit red'><a href=#>Cherry</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='grape fruit purple'><a href=#>Grape</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='lemon citrus yellow fruit'><a href=#>Lemon</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='orange citrus fruit'><a href=#>Orange</a></k-filter-item>
  <k-filter-item class=d-b filter-keywords='strawberry fruit red'><a href=#>Strawberry</a></k-filter-item>
</k-filter-list>
<script type=module>
  const list = document.getElementById('tagFilterList');
  document.querySelectorAll('#tagButtons [data-filter]').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('#tagButtons [data-filter]').forEach(b => b.classList.remove('primary'));
      btn.classList.add('primary');
      list.filter(btn.dataset.filter);
    });
  });
</script>

JavaScript Reference

Constructor

Extends ShadowComponent

`new FilterList()`

`new FilterItem()`

Requirements

ShadowComponent

`filter-keywords: string`

A string of keywords used to match against the search term. The filter() method checks if this value includes the lowercased search term as a substring.

Methods

`filter(term: string): void`

Shows or hides each child k-filter-item based on whether its filter-keywords attribute includes term (case-insensitive). Passing an empty string reveals all items.