JSFiddle - React, Tailwind, and code Playground

by social_quotient

HTML

<link rel="stylesheet" href="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
<link rel="stylesheet" href="http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap-2.3.2/css/bootstrap.min.css">

<p>You can use it in two ways,</p>

<p><strong>First</strong></p>

<p>Just use <code>data-role="tagsinputtwitter"</code> for the input.</p>

<div class="highlight">
    <pre>
<span class="o">&lt;</span><span class="n">input</span> <span class=
"n">type</span><span class="o">=</span><span class=
"s">"text"</span>  <span class="n">data</span><span class=
"o">-</span><span class="n">role</span><span class="o">=</span><span class=
"s">"tagsinputtwitter"</span> <span class="o">/&gt;</span>
</pre>
</div>

<p><strong>Second</strong></p>

<p>Set plugin twitter option as <code>true</code> when you initialize it.</p>

<div class="highlight">
    <pre>
<span class="err">$</span><span class="p">(</span><span class=
"err">'</span><span class="n">input</span><span class=
"err">'</span><span class="p">).</span><span class=
"n">tagsinput</span><span class="p">({</span>
  <span class="nl">twitter:</span> <span class="nb">true</span>
<span class="p">});</span>
</pre>
</div>

<p><strong>Note:</strong> Plugin also removes other <code>@</code>'s.</p>

<p>Demo</p>
<div class="row">
  <div class="col-xs-12">
<input type="text"  data-role="tagsinputtwitter" />
    </div>
</div>

JavaScript

(function ($) {
  "use strict";

  var defaultOptions = {
    tagClass: function(item) {
      return 'label label-info';
    },
    itemValue: function(item) {
      return item ? item.toString() : item;
    },
    itemText: function(item) {
      return this.itemValue(item);
    },
    freeInput: true,
    twitter: false,
    maxTags: undefined,
    confirmKeys: [13],
    onTagExists: function(item, $tag) {
      $tag.hide().fadeIn();
    }
  };

  /**
   * Constructor function
   */
  function TagsInput(element, options) {
    this.itemsArray = [];

    this.$element = $(element);
    this.$element.hide();

    this.isSelect = (element.tagName === 'SELECT');
    this.multiple = (this.isSelect && element.hasAttribute('multiple'));
    this.objectItems = options && options.itemValue;
    this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : '';
    this.inputSize = Math.max(1, this.placeholderText.length);

    this.$container = $('<div class="bootstrap-tagsinput"></div>');
    this.$input = $('<input size="' + this.inputSize + '" type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);

    this.$element.after(this.$container);

    this.build(options);
  }

  TagsInput.prototype = {
    constructor: TagsInput,

    /**
     * Adds the given item as a new tag. Pass true to dontPushVal to prevent
     * updating the elements val()
     */
    add: function(item, dontPushVal) {
      var self = this;

      if (self.options.maxTags && self.itemsArray.length >= self.options.maxTags)
        return;

      // Ignore falsey values, except false
      if (item !== false && !item)
        return;

      // Throw an error when trying to add an object while the itemValue option was not set
      if (typeof item === "object" && !self.objectItems)
        throw("Can't add objects when itemValue option is not set");

      // Ignore strings only containg whitespace
      if...