How to make tag text box [closed]

Question

In stackoverflow we can see a text box 'Tags' when we do a post.

On typing a word and a space it become a tag. After becoming a tag we cont delete a letter from a word.But we can delete the word itself by clicking on the X image.

I want to create a similar text box for tags. In stackoverflow there is auto suggest also associated with this text box but Idon't need that.

Any help /link will be appreciated

Answer 1

There are a whole host of these online. I found some using Google quite easily. Check out this one for example:

http://xoxco.com/projects/code/tagsinput/

Answer 2

Edit: Here's a similar example with a slightly different (better) functionality:
https://stackoverflow.com/a/14083331/383904

---

A nice small demo you can easily upgrade and modify:

$('#tags input').on('focusout',function(){    
  var txt = $.trim( this.value );
  if(txt) {
    $(this).before('<span class="tag">'+txt+'</span>');
  }
  this.value = "";  
});


$('#tags').on('click','.tag',function(){
  if( confirm("Really delete this tag?") ) $(this).remove();
});

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags span.tag{
  display:block;
  float:left;
  color:#fff;
  background:#689;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags span.tag:after{
  position:absolute;
  content:"x";
  border:1px solid;
  padding:0 4px;
  margin:3px 0 10px 5px;
  cursor:pointer;
  font-size:10px;
}
#tags input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags">
  <input type="text" value="" placeholder="Add a tag" />
</div>