TypeaheadSearch

Used to auto complete search results.

<TypeaheadSearch inputLabel="Search" />

Props

Prop	Type	Default	Description
containerStyles	object		styles to apply to the components container.
getOptionLabel	(option) => string		a function that returns the option label.
inputLabel	string		label for the input
onChange	(option) => void		action to perform when option is selected
onSearch	(searchText) => void		action to perform when search text is changed
options	array		array of options
renderOption	(option, state: object) => Node		How to render the option
adminColor	bool	false	If true, semantic blue color is considered as primary color
disabled	bool	false	If true, the component will be disabled
buttonAriaLabel	string	Search	aria-label for the button

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

Examples

Basic

() => {
  const unfilteredOptions = [
    { firstName: 'Joe', lastName: 'Bob' },
    { firstName: 'Jill', lastName: 'Jackson' },
    { firstName: 'Frank', lastName: 'Sinatra' },
    { firstName: 'Billy', lastName: 'Jean' },
    { firstName: 'Meryl', lastName: 'Streep' },
    { firstName: 'Bob', lastName: 'Saget' },
    { firstName: 'Zoe', lastName: 'Deschanel' },
    { firstName: 'Will', lastName: 'Ferrell' },
    { firstName: 'John', lastName: 'Candy' },
  ];
  const [loading, setLoading] = React.useState(false);
  const [searchText, setSearchText] = React.useState('');
  const [options, setOptions] = React.useState([]);
  React.useEffect(() => {
    if (searchText) {
      setLoading(true);
      setOptions([]);
      const timeoutId = setTimeout(() => {
        setLoading(false);
        setOptions(
          unfilteredOptions.filter((option) =>
            new RegExp(searchText, 'ig').test(
              `${option.firstName} ${option.lastName}`,
            ),
          ),
        );
      }, Math.floor(Math.random() * 2500));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    }
  }, [searchText]);
  return (
    <TypeaheadSearch
      getOptionLabel={(option) => `${option.firstName} ${option.lastName}`}
      inputLabel="Search"
      loading={loading}
      onChange={(option) =>
        console.log(`You selected ${option.firstName} ${option.lastName}`)
      }
      onSearch={(searchText) => setSearchText(searchText)}
      options={options}
    />
  );
};

Disabled

<TypeaheadSearch inputLabel="Search" disabled />