2.23.0

Bolt Typeahead

Typeahead is an input field with dropdown-like listbox that displays suggested results that most closely match a user's given search term.

Bolt's Component Explorer is being upgraded. It'll return in a future release!

Installation

npm install @bolt/components-typeahead

Features

What's Next? (Future Updates)


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

Overview Usage Schema Edit this page

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
Debug Panel