JSFiddle - React, Tailwind, and code Playground

by Rutuja Khandpekar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h2>Enter Language</h2>
<div>
    <input type="text" id="demo-input-local" name="blah" />
</div>

CSS

/* Example tokeninput style #1: Token vertical list*/
ul.token-input-list {
    overflow: hidden;
    height: auto !important;
    height: 1%;
    width: 400px;
    border: 1px solid #999;
    cursor: text;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    z-index: 999;
    margin: 0;
    padding: 0;
    background-color: #fff;
    list-style-type: none;
    clear: left;
}

ul.token-input-list li {
    list-style-type: none;
}

ul.token-input-list li input {
    border: 0;
    width: 350px;
    padding: 3px 8px;
    background-color: white;
    -webkit-appearance: caret;
}

ul.token-input-disabled,
ul.token-input-disabled li input {
  background-color: #E8E8E8;
}

ul.token-input-disabled li.token-input-token {
  background-color: #D9E3CA;
  color: #7D7D7D
}

ul.token-input-disabled li.token-input-token span {
  color: #CFCFCF;
  cursor: default;
}

li.token-input-token {
    overflow: hidden;
    height: auto !important;
    height: 1%;
    margin: 3px;
    padding: 3px 5px;
    background-color: #d0efa0;
    color: #000;
    font-weight: bold;
    cursor: default;
    display: block;
}

li.token-input-token p {
    float: left;
    padding: 0;
    margin: 0;
}

li.token-input-token span {
    float: right;
    color: #777;
    cursor: pointer;
}

li.token-input-selected-token {
    background-color: #08844e;
    color: #fff;
}

li.token-input-selected-token span {
    color: #bbb;
}

div.token-input-dropdown {
    position: absolute;
    width: 400px;
    background-color: #fff;
    overflow: hidden;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    cursor: default;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    z-index: 1;
}

div.token-input-dropdown p {
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: #777;
}

div.token-input-dropdown ul {
    margin: 0;
    padding: 0;
}

div.token-input-dropdown ul li {
    background-color: #fff;
    padding: 3px;
   ...

JavaScript

(function ($) {
  var DEFAULT_SETTINGS = {
    // Search settings
    method: "GET",
    queryParam: "q",
    searchDelay: 300,
    minChars: 1,
    propertyToSearch: "name",
    jsonContainer: null,
    contentType: "json",
    excludeCurrent: false,
    excludeCurrentParameter: "x",

    // Prepopulation settings
    prePopulate: null,
    processPrePopulate: false,

    // Display settings
    hintText: "Type in a search term",
    noResultsText: "No results",
    searchingText: "Searching...",
    deleteText: "&#215;",
    animateDropdown: true,
    placeholder: null,
    theme: null,
    zindex: 999,
    resultsLimit: null,

    enableHTML: false,

    resultsFormatter: function(item) {
      var string = item[this.propertyToSearch];
      return "<li>" + (this.enableHTML ? string : _escapeHTML(string)) + "</li>";
    },

    tokenFormatter: function(item) {
      var string = item[this.propertyToSearch];
      return "<li><p>" + (this.enableHTML ? string : _escapeHTML(string)) + "</p></li>";
    },

    // Tokenization settings
    tokenLimit: null,
    tokenDelimiter: ",",
    preventDuplicates: false,
    tokenValue: "id",

    // Behavioral settings
    allowFreeTagging: false,
    allowTabOut: false,
    autoSelectFirstResult: false,

    // Callbacks
    onResult: null,
    onCachedResult: null,
    onAdd: null,
    onFreeTaggingAdd: null,
    onDelete: null,
    onReady: null,

    // Other settings
    idPrefix: "token-input-",

    // Keep track if the input is currently in disabled mode
    disabled: false,

    rightAligned: true
  };

  // Default classes to use when theming
  var DEFAULT_CLASSES = {
    tokenList            : "token-input-list",
    token                : "token-input-token",
    tokenReadOnly        : "token-input-token-readonly",
    tokenDelete          : "token-input-delete-token",
    selectedToken        : "token-input-selected-token",
    highlightedToken     : "token-input-highlighted-token",
    dropdown             :...