Autocomplete

View on GitHub

Introduction

The Autocomplete components renders a filterable list of options in a Popover — it does not render the text input. If you need a combination with a text input and trigger button, take a look at the Combobox component. This component is mainly used to create type aheads

You might not need

In some cases you might be better off using Combobox or SelectMenu.

The autocomplete component combines a set of external libraries

  • Uses Downshift for autocomplete
  • Uses react-tiny-virtual-list for performant list rendering
  • Uses fuzzaldrin-plus for fuzzy filtering

Default example

Hide code

Using children prop

There is no difference between using this syntax and the above syntax.

Hide code

Open on focus

Get the openMenu prop to manually open the menu on certain events such as onFocus.

Hide code

Results with an external trigger

Hide code

Full width with flex and options title, onFocus, filtering, and button to trigger the autocomplete. Note that this is very similar to the Combobox component. Consider using that component before using the Autocomplete component directly.

Hide code

Autocomplete Props

This component composes downshift

titlestring | node
This prop can be either a string or a Node. It will provide a title for the items
itemsarrayrequired
An array of items to be used as options for the select
selectedItemany
The selected Item to be shown on the autocomplete
itemToStringfunc
In case the array of items is not an array of strings, this function is used on each item to return the string that will be shown on the filter
childrenfuncrequired
Function that will render the 'filter' component.
itemSizenumber
The height of each item in the list Because the list is virtualized this is required beforehand.
renderItemfunc
Function that returns a component to render the item
positionPosition.TOP | Position.TOP_LEFT | Position.TOP_RIGHT | Position.BOTTOM | Position.BOTTOM_LEFT | Position.BOTTOM_RIGHT | Position.LEFT | Position.RIGHT
The position of the Popover the Autocomplete is rendered in.
itemsFilterfunc
A function that is used to filter the items. It should return a subset of the initial items. By default the "fuzzaldrin-plus" package is used.
isFilterDisabledbool
Prop that enables and disables filtering True: Enables Filtering False: Disables Filtering
popoverMinWidthnumber
Defines the minimum height the results container will be
popoverMaxHeightnumber
Defines the maximum height the results container will be