Usage

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.

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

jsx

<Autocomplete
  title="Fruits"
  onChange={changedItem => console.log(changedItem)}
  items={['Apple', 'Apricot', 'Banana', 'Cherry', 'Cucumber']}
>
  {props => {
    const { getInputProps, getRef, inputValue } = props
    return (
      <TextInput
        placeholder="Fruits"
        value={inputValue}
        ref={getRef}
        {...getInputProps()}
      />
    )
  }}
</Autocomplete>

Open on focus

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

jsx

<Autocomplete
  title="Fruits"
  onChange={changedItem => console.log(changedItem)}
  items={['Apple', 'Apricot', 'Banana', 'Cherry', 'Cucumber']}
>
  {props => {
    const { getInputProps, getRef, inputValue, openMenu } = props
    return (
      <TextInput
        placeholder="Open on focus"
        value={inputValue}
        ref={getRef}
        {...getInputProps({
          onFocus: () => {
            openMenu()
          }
        })}
      />
    )
  }}
</Autocomplete>

Results with an external trigger

jsx

<Autocomplete
  title="Fruits"
  onChange={changedItem => console.log(changedItem)}
  items={['Apple', 'Apricot', 'Banana', 'Cherry', 'Cucumber']}
>
  {({
    getInputProps,
    getToggleButtonProps,
    getRef,
    inputValue,
    toggleMenu
  }) => (
    <Pane ref={getRef} display="flex">
      <TextInput
        placeholder="Trigger with button"
        value={inputValue}
        {...getInputProps()}
      />
      <Button onClick={toggleMenu} {...getToggleButtonProps()}>
        Trigger
      </Button>
    </Pane>
  )}
</Autocomplete>

Fully featured example

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.

jsx

<Autocomplete
  title="Custom title"
  onChange={changedItem => console.log(changedItem)}
  items={['Apple', 'Apricot', 'Banana', 'Cherry', 'Cucumber']}
>
  {({
    key,
    getInputProps,
    getToggleButtonProps,
    getRef,
    inputValue,
    openMenu,
    toggleMenu
  }) => (
    <Pane key={key} ref={getRef} display="flex">
      <TextInput
        flex="1"
        placeholder="Many Options!"
        value={inputValue}
        onFocus={openMenu}
        {...getInputProps()}
      />
      <Button onClick={toggleMenu} {...getToggleButtonProps()}>
        Trigger
      </Button>
    </Pane>
  )}
</Autocomplete>