MENU


Combo Box


import {useState} from 'react'import {useCombobox} from 'downshift'const items = ['apple','apricot','pear','orange','grape','banana'];export default function App() {
  const [inputItems, setInputItems] = useState(items);
  const {isOpen, getToggleButtonProps, getLabelProps, getMenuProps, getInputProps,
    getComboboxProps, highlightedIndex, getItemProps, }
    = useCombobox({ items: inputItems,
      onInputValueChange: ({ inputValue }) => {
        setInputItems(items.filter(item =>
          item.toLowerCase().startsWith(inputValue.toLowerCase()),),)},});
  return (<div><label {...getLabelProps()}>Choose an element:</label>
    <div {...getComboboxProps()}>
      <input {...getInputProps()} />
      <button type="button"
        {...getToggleButtonProps()}
        aria-label="toggle menu">&#8595;</button>
    </div>
    <ul {...getMenuProps()}>
      {isOpen &&
        inputItems.map((item, index) => (
          <li style={ highlightedIndex === index?{backgroundColor: '#bde4ff' }:{}}
            key={`${item}${index}`}
            {...getItemProps({ item, index })}>
            {item}</li>))}
    </ul>
  </div>);}