С Semantic UI React, как создать ввод тега, аналогичный переполнению стека?

Я заинтересован в создании функции ввода тегов, такой как переполнение стека, где набор функций включает:

  1. Поле ввода, которое имеет функцию автозаполнения (принимает пользовательский ввод, извлекает результаты с сервера и отображает эти результаты пользователю для облегчения выбора.
  2. Поле ввода содержит 1 или более выбранных элементов в качестве тегов.
  3. Предложения за пределами ввода, при нажатии на которые результаты добавляются в поле ввода.

Скриншоты с переполнения стека:

введите здесь описание изображения введите здесь описание изображения

Я использую Semantic-UI-React и заметил, что есть компонент поиска, который может работать: https://react.semantic-ui.com/modules/search

Не похоже, чтобы этот компонент поиска Semantic-UI-React позволял добавлять более одного результата или добавлять результаты с помощью метода вне ввода. Я что-то упускаю?

Должен ли я использовать семантический пользовательский интерфейс для этой функции или мне нужно будет создать его полностью с нуля в моем приложении React?


reactjs semantic-ui-react semantic-ui
person AnApprentice    schedule 24.10.2017    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Он не выделен должным образом в раскрывающейся документации по реакции семантического пользовательского интерфейса, но поле allowAdditions активирует возможности тегирования:

<Dropdown search selection multiple allowAdditions />
person Dan Ochiana    schedule 01.02.2018
comment
Я пробую это в react.semantic-ui.com/modules/dropdown /#types-selection и, похоже, это не работает. - person David; 31.08.2018
comment
@ Дэвид, ты можешь поставить скрипку, чтобы я мог на нее взглянуть? - person Dan Ochiana; 28.09.2018

arrow_upward
0
arrow_downward

Вам нужно добавить реквизит onAddItem, чтобы обновить список опций. В здесь я сделал следующее:

<Dropdown placeholder='Select Friend' fluid search selection multiple allowAdditions onAddItem={(event, data) => friendOptions.push({key: data.value, text: data.value, value: data.value})} options={friendOptions} />

И теперь вы можете добавлять элементы в выпадающий список.

person C-likethis123    schedule 17.01.2020