Question

Is there an easy way to do something like the tag editor at the bottom of the question area in stackoverflow.
I need a list of strings. So, I planned to do a textbox and on pressing the space key, the content is pushed in to a span or a li tag, and the textbox is emptied and ready to enter new content to be pushed.

Answer 1

Demo here

HTML

<div id="container">
    <input type="text" id="tags"/>
</div>    

CSS

#container{
border: 1px solid #FF7800;
padding:10px 0 10px 5px;
}

#tags{
 border:none;
}
.mytag{
background:#FF7800;
color:#fff;
padding:5px;
margin-right:5px;    
}

jQuery

$("#tags").keyup(function(event) {
  //alert(event.keyCode);
    if(event.keyCode=='32'){
        var tagname= $(this).val();
        if(tagname!=" "){
            var newtag= $("<span class='mytag'>"+tagname+"</span>");
            $(this).before(newtag);
        }
        $(this).val("");
    }
});

Demo here I hope you wanted this behaviour