With Semantic UI React, how to build a tag input similar to Stack Overflow's?

Question

I'm interested in building a Tag input feature like Stack Overflow where the feature set includes:

1. Input field which has a autocomplete feature (takes user input, fetches results from the server and displays those results to the user for easy selection.
2. Input field contains 1 or more selected items as tags.
3. Suggestions outside of the input which when clicked have the results added to the input field.

Screenshots from Stack Overflow:

I'm using Semantic-UI-React and notice there is a search component which could work: https://react.semantic-ui.com/modules/search

It does not appear that this Semantic-UI-React search component allows for adding more than one result or adding results via a method outside of the input. Am I missing something?

Should I use Semantic UI for this feature or will I need to build this entirely from scratch in my React app?

Answer 1

It's not properly highlighted in the react semantic-ui dropdown documentation but the allowAdditions field will enable tagging capabilities:

<Dropdown search selection multiple allowAdditions />

Answer 2

You need to add the onAddItem prop to update the options list. In here, I did this:

<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} />

And now you can add items to the dropdown list.