Search List

Usage

import { SearchList } from '@wdzyi/ui';

<SearchList
  items={[
    { id: 'report', label: 'Quarterly report', meta: 'PDF' },
    { id: 'budget', label: 'Budget', meta: 'Sheet', keywords: ['costs'] },
  ]}
  onPick={(item) => open(item.id)}
  placeholder='Search files'
  className='h-80'
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

itemsSearchListItem[]

Each has an id and a label, and can have a quieter meta, keywords to be found by, and an icon. Without an icon, its first letter stands in.

onPick(item: SearchListItem) => void

Called when a result is picked, with Enter or a press.

query, onQueryChangestring, (query: string) => void

What’s typed, to hold it yourself.

filterboolean = true

Off, it shows the items as they come, for results searched for elsewhere. What matches is still drawn out.

loadingboolean = false

Results are on their way, and the pixels work in the field.

placeholder, labelstring = 'Search'

What the empty field says, and its name for screen readers.

hintsboolean = true

Shows the keys and the count along the foot, when it’s at least 380px wide.

Notes

• A result can match at the start of its name, at the start of a word, or anywhere, and comes higher the earlier it matches. Every word typed has to turn up, in the label, the meta or the keywords.
• Results that stay slide to their new places, new ones come up out of a blur in turn, and the ones that go fade where they were.
• The field is a combobox and the results a listbox, so a screen reader follows the active result as the arrows move it, and hears how many there are once typing pauses.
• Give it a height or a max-height and the list scrolls inside it, keeping the active result in view. The keys along the foot drop out under 380px wide.
• With reduced motion, results change in place, without sliding or fading.