JSFiddle - React, Tailwind, and code Playground

by caferdo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/css/select2.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">
<div class="container">
    <div class="row">
        <select id="select1" class="col-md-4">       
        </select>
    </div>
    <textarea id="json">
    </textarea>
</div>

CSS

body{
    
}

JavaScript

var data = [
    {id:0,text:'enhancement'},
    {id:1,text:'bug'},
    {id:2,text:'duplicate'},
    {id:3,text:'invalid'},      
    {id:4,text:'wontfix'}];    

$("#select1").select2({
        placeholder: "Select a phrase"
        ajax : {
            url : "http://ip.jsontest.com/"
            dataType : 'json',
            data: function (term, page) {
                    return {
                        q: term, // search term
                    };
                },
            results : function(data) {
                $("#json").val(data)
                return {
                    results :
                        data.geonames.map(function(item) {
                            return {
                                id : item.geonameId,
                                description : item.countrycode
                            };
                        }
                )};
            }
        }    
    
    });