2.20.0Typeahead is an input field with dropdown-like listbox that displays suggested results that most closely match a user's given search term.
npm install @bolt/components-typeahead
<form> fallback (via Twig)withEvents base class to allow for much deeper JavaScript customization<slot> support| 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 |
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
|
|