Semantic-ui: Tag Input

[jamland]

Can't find multi input like this in docs... That's not hard to create it myself but i think would be cool to have some default element/module.

[jlukic]

Agreed, there's a lot of backlog on semantic. This is another useful thing missing.

I think the issue is that official plugins are attempting to use the same style of module design pattern to attach to same unit tests, and to offer same functionality (traces etc), and it seems people are slow to adopt it with contributions, so i have to wait until i have finish themeing, bugs, missing docs, missing tests before i can start creating new modules.

http://semantic-ui.com/spec/docs/modal.commented.html
http://semantic-ui.com/spec/docs/module.commented.html

[jamland]

Thanks for the spec links!
I will dig into it and will contribute if i will have something.. or at least will learn how to adopt it for my needs :smile_cat:

[caiotarifa]

270

[esbanarango]

:+1:

[jlukic]

Multiselect in 2.0 supports user tagging

[controversial]

Is this available from the search module? I don't see a way to do this with any elements besides dropdown, but the screenshot in the original issue shows a searchbar.

[shahidbasheer]

@jlukic is there option to insert new text tag if it is not available in the options list.

[jlukic]

Dropdown works with api to let you handle large lists

[Janatbek]

How to insert new value between existing tags? I have a list, and I want to add new value in the middle of the list.

[awgv]

@Janatbek You can’t, order manipulation is a known enhancement—I can’t find the issue right now, but it’s there. You could get values from the dropdown, manipulate them, then set exactly using the new array.

[khan990]

Try using https://semantic-ui.com/modules/dropdown.html#/examples
under Tagging and User Additions

<div class="ui sub header">Multiple</div>
<div class="ui fluid multiple search selection dropdown">
  <input name="tags" type="hidden">
  <i class="dropdown icon"></i>
  <div class="default text">Skills</div>
  <div class="menu">
    <div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
<div class="item" data-value="html">HTML</div>
<div class="item" data-value="ia">Information Architecture</div>
<div class="item" data-value="javascript">Javascript</div>
<div class="item" data-value="mech">Mechanical Engineering</div>
<div class="item" data-value="meteor">Meteor</div>
<div class="item" data-value="node">NodeJS</div>
<div class="item" data-value="plumbing">Plumbing</div>
<div class="item" data-value="python">Python</div>
<div class="item" data-value="rails">Rails</div>
<div class="item" data-value="react">React</div>
<div class="item" data-value="repair">Kitchen Repair</div>
<div class="item" data-value="ruby">Ruby</div>
<div class="item" data-value="ui">UI Design</div>
<div class="item" data-value="ux">User Experience</div>
  </div>
</div>

[Berger92]

Here's my solution based on vuejs, enjoy!
JsFiddle

[deshario]

@khan990 its not working .... When i tried to add new which arent available under dropdown ... it shows no results found ... and i cant press enter also ... Is there anything missing from me ?

[khan990]

@deshario, hope this helps

Write a new text and press enter. And try to check the version that you are using.

[deshario]

@khan990 What version are you using?

[khan990]

@deshario I recorded gif from https://semantic-ui.com/modules/dropdown.html#/examples. It should be 2.4.