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?

Dan Ochiana · Accepted Answer · 2018-02-01 13:26:29Z

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 1, 2018 at 13:26

Dan Ochiana

3,4381 gold badge32 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Over a year ago

I'm trying this in react.semantic-ui.com/modules/dropdown/#types-selection and it doesn't seem to work.

Dan Ochiana Over a year ago

@David can you put up a fiddle so I can give it a look?

C-likethis123 · Accepted Answer · 2020-01-17 05:37:24Z

1

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.

answered Jan 17, 2020 at 5:37

C-likethis123

311 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related