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:

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.
Input field contains 1 or more selected items as tags.
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?

score 9 · Accepted Answer · answered Feb 01 '18 at 13:26

9

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

answered Feb 01 '18 at 13:26

Dan Ochiana

3,340
1
30
28

1

I'm trying this in https://react.semantic-ui.com/modules/dropdown/#types-selection and it doesn't seem to work. – David Aug 31 '18 at 06:37
@David can you put up a fiddle so I can give it a look? – Dan Ochiana Sep 28 '18 at 17:38

score 1 · Answer 2 · answered Jan 17 '20 at 05:37

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.

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

2 Answers2