something like this
html
<div id="box">
<ul>
<li><input type="text" id="type"/></li>
</ul>
</div>
jquery
function closer(){
$('#box a').on('click', function() {
$(this).parent().parent().remove();
});
}
$('#type').keypress(function(e) {
if(e.which == 13) {//change to 32 for spacebar instead of enter
var tx = $(this).val();
if (tx) {
$(this).val('').parent().before('<li><span>'+tx+'<a href="javascript:void(0);">x</a></span></li>');
closer();
}
}
});
this adds when enter is pressed, so it will work like lord of the rings
instead of lord
of
the
rings
. change e.which == 13
to e.which == 32
if you want spacebar to trigger it.
it will still need css changes to make it look exactly how you would like, this is just an example of how it works.
made a fiddle: http://jsfiddle.net/filever10/bjBQZ/