Add Hashtags for Input

by Andrei Balashov

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="input__hashtags">
  <ul class="hashtag__list">
  <li class="hashtag__item"><span class="hashtag-text">tag</span><span class="hashtag-close">˟</span></li>
    <li class="hashtag__input"><input type="text" class="hashtags" placeholder="add a tag"></li>
  </ul>
</div>

CSS

.input__hashtags {
  background-color: #fff;
  display: block;  
  line-height: 1;
  min-width: 50px;
  padding: 2px 3px;
}
.hashtag__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.hashtag__item {
  background-color: #AAA;
  padding: 2px 4px;
  display: block;
  float: left;
  color: #fff;
  margin-right: 2px;
  vertical-align: middle;
}
.hashtag-text {
  
}
.hashtag-close {
  cursor:pointer;
  margin-left: 3px;
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  color: red;
}

.hashtags {
  background: none;
  display: inline-block;
  border: none;
  outline: none;
  margin-left: 3px;
}

JavaScript

$('input.hashtags').keydown(function(eventObject){ 
  if (event.keyCode == 13) { 
  	var input = $(this);
    var value = input.val();
    
    $("li.hashtag__input").before(
    	"<li class='hashtag__item'>"+
      "<span class='hashtag-text'>"+value+"</span>"+
      "<span class='hashtag-close'>˟</span>"
      +"</li>"
    );
    $(this).val("");
  }
});

$('li.hashtag__item').on('click',function(){
	console.log($(this).parent().html());
  $(this).parent().remove();
});