Combo box search suggestions

A combo box setup to behave like the search suggestions on the Google home page.

• the value is updated both by onSearch and onValue
• showSelectedLabel is enabled to update value in the input as the selects different options.
• expandOnFocus is disabled so you have to type to see results
• The highlighter is set to inverse to highlight the completion.

The token search is used here. In reality the search suggestions would be returned by a search engine.

You maybe better using a native <datalist> if wish to build search suggestions.

import { useState } from 'react';
import { ComboBox, usePrefixSearch, TokenHighlight } from '@citizensadvice/react-combo-boxes';

const options = [
  'css',
  'css italic',
  'css isolation',
  'css is awesome',
  'css is awesome mug',
  'css is',
  'css is visible',
  'css is selector',
  'css is hard',
  "css isn't being applied",
  'css is not',
  'css is not a function',
  'css syallbus',
  'css grid',
  'cssd',
];

function renderValue(_, { search, option: { label } }) {
  return (
    <TokenHighlight
      search={search}
      value={label}
      inverse
    />
  );
}

export function Example() {
  const [value, setValue] = useState(null);
  const filteredOptions = usePrefixSearch(value, { options });

  return (
    <>
      <label
        id="select-label"
        htmlFor="select"
      >
        Select
      </label>
      <ComboBox
        id="select"
        aria-labelledby="select-label"
        value={value}
        onValue={setValue}
        onSearch={setValue}
        options={filteredOptions}
        showSelectedLabel
        managedFocus={false}
        expandOnFocus={false}
        renderDownArrow={() => null}
        renderClearButton={() => null}
        renderNotFound={() => null}
        renderValue={renderValue}
      />

      <label htmlFor="output">Current value</label>
      <output
        htmlFor="select"
        id="output"
      >
        {JSON.stringify(value, undefined, ' ')}
      </output>
    </>
  );
}