Repository files navigation

Display elements in a subtree that match filter input text.

$ npm install @github/filter-input-element

<filter-inputaria-owns="robots"><label>    Filter robots<inputtype="text"autofocusautocomplete="off"></label></filter-input><divid="robots"><uldata-filter-list><li>Bender</li><li>Hubot</li><li>Wall-E</li><li>BB-8</li><li>R2-D2</li></ul><pdata-filter-empty-statehidden>0 robots found.</p></div>

• filter-input[aria-owns] should point to the container ID that wraps all<filter-input> related elements.
• filter-input should have oneinput child element that is used to filter.
• [id] should be set on a container that either contains or has[data-filter-list] attribute.
• [data-filter-list] should be set on the element whosedirect child elements are to be filtered.

Use[data-filter-item-text] to specify an element whose text should be used for filtering. In the following example, the text(current) would not be matched.

<divdata-filter-list><ahref="/bender">Bender</a><ahref="/hubot"><spandata-filter-item-text>Hubot</span>    (current)</a></div>

Use[data-filter-empty-state] to specify an element to be displayed when no results were found. This element must be inside of the containeraria-owns points to.

<divid="filter-list"><divdata-filter-list><ahref="/bender">Bender</a><ahref="/hubot">Hubot</a></div><divdata-filter-empty-statehidden>No results found.</div></div>

Use[data-filter-new-item] to include an item to create a new instance when no exact match were found. The element with[data-filter-new-text]'s text content will be set to the input value. You can also use[data-filter-new-value] to set an input value to the query param.

<divid="filter-list"><divdata-filter-list><ahref="/bender">Bender</a><ahref="/hubot">Hubot</a></div><formaction="/new"data-filter-new-itemhidden><buttonname="robot"data-filter-new-item-value>      Create robot "<spandata-filter-new-item-text></span>"</button></form></div>

filterInputElement.filter can be optionally set to provide an alternative filtering logic. The default is substring.

constfuzzyFilterInput=document.querySelector('.js-fuzzy-filter-input')fuzzyFilterInput.filter=(element,elementText,query)=>{// fuzzy filtering logicreturn{match:boolean,hideNew:boolean}}

match(required) indicates whether the item should be shown.hideNew (optional) will determine whether the "Create new item" element should be hidden. For example, when an exact match is found, the "create new item" option should be hidden.

• filter-input-start (bubbles) - fired on<filter-input> when a filter action is about to start.
• filter-input-updated (bubbles) - fired on<filter-input> when filter has finished.event.detail.count is the number of matches found, andevent.detail.total is the total number of elements.

To ensure that the client side update is communicated to assistive technologies,filter-input-updated event can be used to update filter results to screen readers. For example:

constariaLiveContainer=document.querySelector('[aria-live="assertive"]')document.addEventListener('filter-input-updated',event=>{ariaLiveContainer.textContent=`${event.detail.count} results found.`})

For more details on this technique, check outImproving accessibility on GOV.UK search.

Browsers without nativecustom element support require apolyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

npm installnpm test

Distributed under the MIT license. See LICENSE for details.