Tag search bar

index.html

<div class="searchBar">
  <input type="text" name="search" placeholder="" size="1">
</div>

<!-- You don't need this -->
<div class="--debug">
  <h3 style="color: white;font-family: 'Roboto'"> var Filter : <span id="filter"></span></h3>
</div>

script.js

let filter = ['rap', 'cloud'];
showFilter();

// set focus on input when cliking on the bar
$('.searchBar').on('click', function(){
  $(this).find('input').focus();
});

// binding Text - Set size of text as size of input
$('input').on('keyup', function(){
  var val = $(this).val().length;
  if (!val)
    $(this).attr("size", 1);
  else
    $(this).attr("size", val);
})
 $.fn.extend({
    animateCss: function(animationName, callback) {
        var animationEnd = (function(el) {
            var animations = {
                animation: 'animationend',
                OAnimation: 'oAnimationEnd',
                MozAnimation: 'mozAnimationEnd',
                WebkitAnimation: 'webkitAnimationEnd',
            };

            for (var t in animations) {
                if (el.style[t] !== undefined) {
                    return animations[t];
                }
            }
        })(document.createElement('div'));

        this.addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);

            if (typeof callback === 'function') callback();
        });

        return this;
    },
});
// binding Space - Add tag
$('input').on('keydown', function(event){
  if (event.which === 32){
    event.preventDefault();
    val = $(this).val().replace(/ /g,'').replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').toLowerCase();
    if (val == '')
      return false;
    
    if (!filter.includes(val)){
        filter.push(val);
        $('<span class="tag">' + val + '<span class="remove"></span></span>').insertBefore('input[name="search"]');
        $(this).val('');
    }
    else{
      $('.tag').each(function(){
                    if ($(this).text() == val){
                        $(this).addClass('animated bounce');
                      alert('salut');
                    }
                })
    }
      
  }
  
  // Show filter
  showFilter();
});

// 
$('input').on('keydown', function(event){
  if (event.which == 8 && '' == $(this).val()){
    var touch = $(this).prev();
    var text = touch.text();
    filter.remove(text);
    $('.tag').each(function(){
      var $this = $(this);
      if ($this.text().toLowerCase() == text.toLowerCase())
        $this.remove();
    })
    touch.last().remove();
  }
  // Showing info about filter variable
  showFilter();
});

$('body').on('click', '.tag', function(){
  var text = $(this).text().slice(0,-1);
  filter.remove(text);
  $(this).remove();
  
  // show Filter
  showFilter();
});


// array.remove()
Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};

// Escaping
function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

// Showing info about filter variable
function showFilter(){
  document.getElementById('filter').innerHTML = filter;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>

style.sass

body
  background: linear-gradient(to right, #da4453, #89216b)
  .searchBar
    background: white
    box-sizing: content-box
    padding: 5px 10px
    border-radius: 4px
    font-family: Roboto
    line-height: 50px
    width: 80vw
    margin: 10vh auto
    cursor: pointer
    transition: 0.1s all
    //&:hover
      //margin-left: 0px
    .tag
      background: #333
      margin: 5px
      color: white
      padding: 10px 15px 10px 20px
      border-radius: 4px
      cursor: pointer
      &:hover
        background: #222
      .remove
        &:before
          content: '×'
          padding-left: 15px
          
      
      
    input[name="search"]
      padding: 10px
      border: 1px solid transparent
      font-size: 16px
      background: white

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />

tag-search-bar.markdown

Tag search bar

A Pen by Elias Bendjaballah on CodePen.

License.