Tag Input

HTML

<div class="round">
	<div class="current-tags">
	</div>
	<input type="text" name="tag" class="tag">
</div>

CSS

.round{

	border: 1px solid #00c8d2;
	background: #fff;
}
.current-tags{
	display: inline-block;
	margin-right: -4px;
}
.round span{
	display: inline-block;
	padding: 5px;
	background: #ffcc05;
	color: #fff;
	margin: 3px;
}
.round input{
	border: 0;
}

JavaScript

$(function() {
	alert('Press comma key to add tag.');
       var $round = $('.round');
	   var $current_tags = $('.current-tags');
		var $tag = $('.tag');
		var list_tag = ['tag1','vtag2', 'atag3'];
		for(var i=0; i< list_tag; i++){
			
		}
		$tag.keyup(function(e){
		
			  if(e.which === 188){
			  	if($current_tags.children('span')){
					$current_tags.append($('<span>'+$tag.val().replace(',', '')+'</span>')
										.on('click', function(e){
											$(this).remove();
										})
						);
				}else{
					$current_tags.prepend($('<span>'+$tag.val().replace(',', '')+'</span>')
										.on('click', function(e){
											$(this).remove();
										})
						);
				}
					$tag.val('');
			   }
		});
		
		
		
	 
    });