Typeahead
Typeahead component encapsulates autocomplete search functionality and provides users with a list of suggested options.
Try typing "Hanbury" in the above text input field and select an item from the suggested list.
Configurations
Open by default
Set the isOpen
property to be true by default.
This configuration will also cause the component to push content down instead of overlapping by default.
Initial selected item
Set a selected item for when the component is initialised.
Loading
Display a loading state to indicate that items are being fetched.
Implementation
Props
label
A label for the text input element.
placeholder
A placeholder for the text input element.
searchDescription
A guidance message to display above the items
list.
loading
Displays a loading spinner inside the searchDescription
when set to true
.
notFoundItem
An Item
that allows the user to select that they have not found an item they are searching for.
handleStateChange
Receives TypeaheadOptions
Consumers should use this function to filter the items list by the inputValue
. Another suggested functionality would be to highlight the text in the items
that matches the inputValue
.
A working example of this function has been provided in the demo.
For reading updates in the selected item, use onItemSelection
.
onInputValueChange
Consumers can use this function to receive the inputValue
. It is recommened when using the inputValue
as a controlled prop.
items
The list of selectable items in the Typeahead.
isOpen
Whether the menu is open or closed.
defaultIsOpen
Set the isOpen
value anytime the component is reset, when a selection is cleared, or an item is selected.
initialInputValue
Set an initial value when the Typeahead is initialised.
inputValue
The value the text input should have.
The selectedItem
and initialSelectedItem
props take precendence over inputValue
.
initialSelectedItem
Pass an item or an array of items that should be selected when the Typeahead is initialised.
selectedItem
The currently selected item.
highlightedIndex
The current highlighted (hovered) index.
defaultHighlightedIndex
The value to set the highlightedIndex
whenever the component is reset, when the the selection is cleared,
when an item is selected or when the inputValue is changed.
onItemSelection
Called when the user selects an item and the selected item has changed.
typeaheadRef
A ref of the Downshift component.
noResultsFoundMessage
Optionally set a message for when no results are found. Default value is "No results found". If null is provided then this typeahead item does not exist.
Types
Item
The node
type is optional because it is not required for passing an initial list of items. But it is required to return
a node in the custom filtering in order to display the items list. The items
type would be Item[]
.
interface Item {value: string;id: string;node?: React.ReactNode;}
TypeaheadOptions
The options that are returned in the handleStateChange
function.
interface TypeaheadOptions {type: string;isOpen: boolean;inputValue?: string;highlightedIndex?: number;selectedItem?: Item;}