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