Possible components that could be built with react-autocompletely.

react-autocompletely-components.jsx

function ArrowToggle({ active }) {
  return <Icon name={active ? 'arrow-up' : 'arrow-down'} />
}

function renderTrigger({ isOpen, selectedItem, toggleMenu, ...props }) {
  return (
    <Button onClick={toggleMenu} {...props}>
      {selectedItem} <ArrowToggle active={isOpen} />
    </Button>
  )
}

function renderInput({
  isOpen,
  selectedItem,
  toggleMenu,
  placeholder,
  ...props
}) {
  return (
    <Box position="relative">
      <Autocomplete.Input isOpen={isOpen} placeholder={placeholder} />
      {selectedItem
        ? <Button
            paddingTop={4}
            onClick={clearSelection}
            aria-label="clear selection"
          >
            <Icon name="close" />
          </Button>
        : <Button
            onClick={toggleMenu}
            aria-label={isOpen ? 'close menu' : 'open menu'}
          >
            <ArrowToggle active={isOpen} />
          </Button>}
    </Box>
  )
}

function Item({ isHighlighted, isSelected, ...props }) {
  const css = {
    padding: 1,
    backgroundColor: '#fff',
  }

  if (isHighlighted) {
    css.backgroundColor = '#eee'
  }

  if (isActive) {
    css.backgroundColor = '#ccc'
  }

  return <Box component={Autocomplete.Item} {...css} {...props} />
}

function Menu({
  filter = items => items,
  items,
  renderItemLeft,
  renderItemRight,
}) {
  return (
    <Autocomplete.Controller
      children={({ inputValue, selectedItem }) =>
        <Autocomplete.Menu
          children={({ highlightedIndex }) =>
            <Card component="ul" paddingVertical={0.5}>
              {items[filter](items, inputValue).map((item, index) => {
                const isHighlighted = highlightedIndex === index
                const isSelected = selectedItem === item
                return (
                  <Item
                    key={item.value}
                    item={item.value}
                    index={index}
                    isHighlighted={isHighlighted}
                    isSelected={isSelected}
                  >
                    {typeof renderItemLeft === 'function' &&
                      renderItemLeft({ isActive, isSelected })}
                    {item.children}
                    {typeof renderItemRight === 'function' &&
                      renderItemRight({ isActive, isSelected })}
                  </Item>
                )
              })}
            </Card>}
        />}
    />
  )
}

function Dropdown({ items, filter, ...props }) {
  return (
    <Autocomplete {...props}>
      <Autocomplete.Controller children={renderTrigger} />
      <Menu items={items} />
    </Autocomplete>
  )
}

function Select({
  options,
  multiple,
  autocomplete,
  filter,
  checkbox,
  ...props
}) {
  return (
    <Autocomplete {...props}>
      <Autocomplete.Controller
        children={autocomplete ? renderInput : renderTrigger}
      />
      <Menu
        items={parsedOptions}
        filter={filter}
        renderItemLeft={
          checkbox && (({ isSelected }) => <Checkbox checked={isSelected} />)
        }
      />
    </Autocomplete>
  )
}