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

`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.

`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.

`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.

`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.

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;
}