JSFiddle - React, Tailwind, and code Playground

by davertron

HTML

<script src="https://raw.github.com/ivaynberg/select2/master/select2.js"></script>
<h1>E-mails</h1>
<input type="hidden" />

CSS

h1 { font-size: 120%; font-weight: bold; margin-top: 0.5em; margin-bottom: 0.25em; }

body { padding: 10px }
/* https://github.com/ivaynberg/select2/raw/master/select2.css */

/*
Version: @@ver@@ Timestamp: @@timestamp@@
*/
.select2-container {
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: top;
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input{
  /*
    Force border-box so that % widths fit the parent
    container without overlap because of margin/padding.

    More Info : http://www.quirksmode.org/css/box.html
  */
  -moz-box-sizing: border-box;    /* firefox */
  -ms-box-sizing: border-box;     /* ie */
  -webkit-box-sizing: border-box; /* webkit */
  -khtml-box-sizing: border-box;  /* konqueror */
  box-sizing: border-box;         /* css3 */
}

.select2-container .select2-choice {
    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
    background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
    background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #aaa;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 26px;
    line-height: 26px;
    padding: 0 0 0 8px;
    color: #444;
    text-decoration:...

JavaScript

$(function() {
    $('input').select2({
        tags: [],
        width: "300px",
        dropdownCss: {
            display: 'none'
        },
        tokenSeparators: [',', ', ', ' ']
    });
    
    console.log($('.select2-input'));
    
    $('.select2-input').on('blur', function(){
        var $this = $(this),
            value = $this.val();
        
        console.log(value);
    });
});