put textbox content on span or li after doing space

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 a开发者_StackOverflow社区nd ready to enter new content to be pushed.

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