Minimal style Taggle.js

HTML

<div id="example1" class="input textarea"></div>

CSS

.textarea {
  width: 100%;
  height: 35px;
  border: 1px solid blue;
}

.taggle_list {
  float: left;
  padding: 0;
  margin: 0;
  width: 100%;
}

.taggle_input {
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 300;
}

.taggle_list li {
  float: left;
  display: inline-block;
  white-space: nowrap;
  font-weight: 500;
  margin-bottom: 5px;
}

.taggle_list .taggle {
  margin-right: 8px;
  background: #E2E1DF;
  padding: 5px 10px;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  transition: all .3s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.taggle_list .taggle_hot {
  background: #cac8c4;
}

.taggle_list .taggle .close {
  font-size: 1.1rem;
  position: absolute;
  top: 10px;
  right: 3px;
  text-decoration: none;
  padding: 0;
  line-height: 0.5;
  color: #ccc;
  color: rgba(0, 0, 0, 0.2);
  padding-bottom: 4px;
  display: none;
  border: 0;
  background: none;
  cursor: pointer;
}

.taggle_list .taggle:hover {
  padding: 5px;
  padding-right: 15px;
  background: #ccc;
  transition: all .3s;
}

.taggle_list .taggle:hover>.close {
  display: block;
}

.taggle_list .taggle .close:hover {
  color: #990033;
}

.taggle_placeholder {
  position: absolute;
  color: #CCC;
  top: 12px;
  left: 8px;
  transition: opacity, .25s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.taggle_input {
  padding: 8px;
  padding-left: 0;
  float: left;
  margin-top: -5px;
  background: none;
  width: 100%;
  max-width: 100%;
}

.taggle_sizer {
  padding: 0;
  margin: 0;
  position: absolute;
  top: -500px;
  z-index: -1;
  visibility: hidden;
}

JavaScript

/* !
 * @author Sean Coker <[email protected]>
 * @version 1.9.0
 * @url http://sean.is/poppin/tags
 * @license MIT
 * @description Taggle is a dependency-less tagging library
 */

(function(window, document) {
  'use strict';

  /////////////////////
  // Default options //
  /////////////////////

  var noop = function() {};
  var retTrue = function() {
    return true;
  };
  var BACKSPACE = 8;
  var COMMA = 188;
  var TAB = 9;
  var ENTER = 13;

  var DEFAULTS = {
    /**
     * Class names to be added on each tag entered
     * @type {String}
     */
    additionalTagClasses: '',

    /**
     * Allow duplicate tags to be entered in the field?
     * @type {Boolean}
     */
    allowDuplicates: false,

    /**
     * Allow the saving of a tag on blur, rather than it being
     * removed.
     *
     * @type {Boolean}
     */
    saveOnBlur: true,

    /**
     * Class name that will be added onto duplicate existant tag
     * @type {String}
     * @todo
     * @deprecated can be handled by onBeforeTagAdd
     */
    duplicateTagClass: '',

    /**
     * Class added to the container div when focused
     * @type {String}
     */
    containerFocusClass: 'active',

    /**
     * Should the input be focused when the container is clicked?
     * @type {Bool}
     */
    focusInputOnContainerClick: true,

    /**
     * Name added to the hidden inputs within each tag
     * @type {String}
     */
    hiddenInputName: 'taggles[]',

    /**
     * Tags that should be preloaded in the div on load
     * @type {Array}
     */
    tags: [],

    /**
     * Add an ID to each of the tags.
     * @type {Boolean}
     * @todo
     * @deprecated make this the default in next version
     */
    attachTagId: false,

    /**
     * Tags that the user will be restricted to
     * @type {Array}
     */
    allowedTags: [],

    /**
     * Tags that the user will not be able to add
     * @type {Array}
     */
    disallowedTags: [],

    /**
     * Limit the number of tags...