JSFiddle - React, Tailwind, and code Playground

by Zoxon

HTML

<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<input type='hidden' id='tags' style='width:300px'/>

JavaScript

(function() {
var choices=[];

$("#tags").select2({
    query:function(query) {
        var data={}, i;
        data.results=[];
        
        // first add the current search term as a choice
        
        if (query.term!=="") {          
            data.results.push({id:query.term,text:query.term});
        }
        
        // then append the rest
        
        for (i=0;i<choices.length;i++) {
            data.results.push(choices[i]);
        }
        
        query.callback (data);
    }
}).on("open", function() {
console.log("opened", this);
    
$(this).select2("val", "");        
    
}).on("change", function() {
    
    // add new items to the collection of choices
    
    var result=$(this).select2('val'), i, found=false;
    for (i=0;i<choices.length;i++) {
        if (choices[i].id.localeCompare(result)===0) {
            found=true;
            break;
        }
    }
    if (!found) { choices.push({id:result, text:result}); }
});
})();