JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<div id="e1" style="width:300px">
    
</div>
<br/><br/>
<div>
    <button id="set">set</button>
    <button id="button">click</button>
</div>

JavaScript

var choices = "hello world how are you doing today abc def".split(" ");
var results = { 
    results: _.map(choices, function (value, index) {
        return {
            id: choices[index],
            text: choices[index]
        };
    })
};
$("#e1").select2({
    tokenSeparators: [",", " "],
    // data: function() { return results },
    // multiple: true,
    tags: choices
});

var element = document.getElementById("button");
element.addEventListener("click", function () {
    console.log($("#e1").val())
});

var element = document.getElementById("set");
element.addEventListener("click", function () {
    $("#e1").val("data", "hello,world");
});