Выпадающий список с поиском с помощью Semantic UI React

Выпадающий список — это здорово, но знаете, что делает его лучше? с поиском!
Как это сделать с помощью Semantic UI React :
Сначала проверьте документацию, затем вы получите

const countryOptions = [
  { key: 'apple', value: 'apple', text: 'apple' },
  { key: 'banana', value: 'banana', text: 'banana' },
  { key: 'coconut', value: 'coconut', text: 'coconut' },
]
const SelectFruit = () => (
  <Select 
     placeholder='Select your fruit' 
     options={fruitOptions}    
  />
)
export default SelectFruit;

но что, если у вас много вариантов?
просто добавьте search внутрь компонента! поэтому пользователи разрешают ввод и поиск.

но ждать…

Это не сработает, даже если вы поставите search="true" или search={true}
Вы также должны добавить selection.

Если вы хотите изменить сообщение об отсутствии результата по умолчанию.
Просто добавьте noResultMessage и измените текст,
чтобы окончательный результат выглядел так.

const countryOptions = [
  { key: 'apple', value: 'apple', text: 'apple' },
  { key: 'banana', value: 'banana', text: 'banana' },
  { key: 'coconut', value: 'coconut', text: 'coconut' },
]
const SelectFruit = () => (
  <Select 
     placeholder='Select your fruit' 
     options={fruitOptions}  
     search
     selection
     noResultsMessage=”your fruit is out of stock!”
  />
)
export default SelectFruit;

Наслаждайся этим!