@bolt/components-typeahead
v5.8.0
Published
Typeahead is an input field with dropdown-like listbox that displays suggested results that most closely match a user's given search term.
Downloads
322
Readme
Installation
npm install @bolt/components-typeahead
Features
- Progressively enhanced simple html
<form>
fallback (via Twig) - Server-side pre-rendered SVG icons (when using Twig)!
- Uses the new
withEvents
base class to allow for much deeper JavaScript customization - Fuzzy logic search / fuzzy matching using fuse.io
- Keyboard combo-support (command+shift+f)
- Wired up to use CSS Modules (once they ship in a future Bolt release)
- Fully customizable behavior to handle partial vs full result matches, etc
- Supports rendering to the Shadow DOM and the Light DOM
What's Next? (Future Updates)
- Fully support theming system colors
- JSDoc support / further improve docs and demos
- Broader testing coverage
- Look into adding
<slot>
support - More customization for additional use cases?
- Multi-section support
API
JavaScript Properties/Attributes
| Name | Type | Description
| ------------------- | --------------------- |------------
| items
| array
| An array of objects that populates the dropdown
JavaScript Event Hooks
| Name | Params | Description
| ------------------------------ | --------------------- | -----------
| onInput
| event
, value
| Called every time the input value changes
| getSuggestions
| value
| Called by onSuggestionsFetchRequested
when re-rendering suggestions. Handles highlighting keywords in the search results in a React-friendly way + handles limiting the total number of results displayed
| onChange
| event
, newValue
, method
| Called when a suggestion is selected. Includes info on how the particular item was selected (click, keyboard, etc)
| onSuggestionsFetchRequested
| value
| Called every very time you need to gather / update suggestions to display. See onSuggestionsFetchRequested for more info.
| onSuggestionsClearRequested
| | Called when clearing suggestions. See onSuggestionsClearRequested for more info.
| onSelected
| event
, suggestion
| Will be called every time suggestion is selected via mouse or keyboard. See onSuggestionSelected for more info.
| onRenderInput
| value
| Fired when the input is being rendered