How does stackoverflow make its Tag input field? [closed]

Solution 1:

What about Bootstrap solution?

You can try this :

HTML Code:

<input type="text" value="html,input,tag" data-role="tagsinput"></input>

For CSS, call these two files:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

For Javascript, call these two files:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

The code will generate the result below:

enter image description here

Check it out.

Solution 2:

What I would do is:

Create a master DIV with a border (like here the border 1px solid #000)
After, inside this DIV, I will create another DIV (float: left;), another DIV (float: right) and an input inside the right div.

When you write inside the input and let's say you select HTML, it creates a span in the left DIV and reduces the width of the right div to match the remaining size. Of course, inside your span there's the text HTML with the delete sign.

You could do it easily using jQuery.

Example:

<div id="master_div">
    <div id="categories">

    </div>
    <div id="input">
        <input type="text" value="" />
    </div>
</div>

And you write some jQuery / JS

Solution 3:

It doesn't. If you look at the DOM, you see initially just an input box. Once you add a tag, it inserts a <span> tag before the input box with that tag and it's delete icon. The input box is now to the right of this <span> tag. When you click on a tag to edit it, it puts a textbox in its place so you can edit it. All this is done with Javascript and there are some JQuery plugins to help you do this. Here's one from a quick Google search: http://xoxco.com/projects/code/tagsinput/

As far as styling goes, the <span> elements can have whatever CSS you want on them.

Solution 4:

var es = document.querySelectorAll('.input-categories');
for (var i = 0; i < es.length; i++) {
  es[i]._list = es[i].querySelector('ul');
  es[i]._input = es[i].querySelector('input');
  es[i]._input._icategories = es[i];
  es[i].onkeydown = function(e){
    var e = event || e;
    if(e.keyCode == 13) {
      var c = e.target._icategories;
      var li = document.createElement('li');
      li.innerHTML = c._input.value;
      c._list.appendChild(li);
      c._input.value = '';
      e.preventDefault();
    }
  }
}

*{
  margin: 0px;
  padding: 0px;
}

.input-categories{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border: 1px solid black;
}

.input-categories ul{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  flex-wrap: wrap;
}

.input-categories li{
  border: 1px solid black;
  border-radius: 2px;
  padding: 1px;
  margin: 1px;
}
.input-categories input{
  flex: 1 1 auto;
  align-self: flex-start;
}

<div class="input-categories">
  <ul>
    <li>moscow</li>
    <li>new york</li>
  </ul>
  <input type="text"/>
</div>

<div class="input-categories">
  <ul>
    <li>CSS</li>
    <li>PHP</li>
  </ul>
  <input type="text"/>
</div>