Overview
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
withEventsbase 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 |
Additional references
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
|
The maximum number of typeahead results to display |
number
|
10
|
|
|
|
An array of objects that's used to populate the suggestion list that appears below the input as the users type. This array of objects can be asynchronously fetched and should contain a |
array
| — |
|
|
|
Screenreader-specific text for the clear search button, intended to provide a longer, more descriptive explanation of the clear button's behavior. |
string
|
Clear search results
|
|
|
|
Screenreader-specific text for the submit button, intended to provide a longer, more descriptive explanation of the submit button's behavior. |
string
|
Submit search query
|
|
|
|
Screenreader-specific label text associated with the search input. |
string
| — |
|
|
|
The placeholder text to display inside the Typeahead search input. |
string
|
Enter your search query
|
|
|
|
Initial value to pre-populate the input field |
string
| — |
|
|
|
Input element's name attribute used when pre-rendering the component |
string
| — |
|
|
|
Disable text highlighting in matching search results (highlighting is enabled by default) |
boolean
|
false
|
|