Overview

npm install @bolt/components-typeahead

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

API

Name	Type	Description
`items`	`array`	An array of objects that populates the dropdown

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

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)
Attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
Max_results	The maximum number of typeahead results to display	`number`	`10`	—
Items	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 `label`, `url`, and optionally `description`.	`array`	—	—
Clear_input_text	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`	—
Submit_button_text	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`	—
Input_label	Screenreader-specific label text associated with the search input.	`string`	—	—
Input_placeholder	The placeholder text to display inside the Typeahead search input.	`string`	`Enter your search query`	—
Input_value	Initial value to pre-populate the input field	`string`	—	—
Input_name	Input element's name attribute used when pre-rendering the component	`string`	—	—
No_highlight	Disable text highlighting in matching search results (highlighting is enabled by default)	`boolean`	`false`	—