How To Make Tag Text Box

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 d

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

Solution 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;
}
#tagsspan.tag{
  display:block;
  float:left;
  color:#fff;
  background:#689;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tagsspan.tag:after{
  position:absolute;
  content:"x";
  border:1px solid;
  padding:04px;
  margin:3px010px5px;
  cursor:pointer;
  font-size:10px;
}
#tagsinput{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="tags"><inputtype="text"value=""placeholder="Add a tag" /></div>