JSFiddle - React, Tailwind, and code Playground

by Sambora

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-spinner.gif"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.png"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fk.github.io/select2-bootstrap-css/css/select2-bootstrap.css">
<div class="form-group">
    <label for="default" class="control-label">Default textbox</label>
    <input id="default" type="text" class="form-control" placeholder="Placeholder text">
</div>
<div class="form-group">
    <label for="single" class="control-label">Select2 single select</label>
    <select id="single" class="form-control select2">
        <option></option>
        <optgroup label="Alaskan/Hawaiian Time Zone">
            <option value="AK">Alaska</option>
            <option value="HI">Hawaii</option>
        </optgroup>
        <optgroup label="Pacific Time Zone">
            <option value="CA">California</option>
            <option value="NV">Nevada</option>
            <option value="OR">Oregon</option>
            <option value="WA">Washington</option>
        </optgroup>
        <optgroup label="Mountain Time Zone">
            <option value="AZ">Arizona</option>
            <option value="CO">Colorado</option>
            <option value="ID">Idaho</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NM">New Mexico</option>
            <option value="ND">North Dakota</option>
            <option value="UT">Utah</option>
            <option value="WY">Wyoming</option>
        </optgroup>
        <optgroup label="Central Time Zone">
            <option...

JavaScript

var placeholder = "Select a State";

$(".select2, .select2-multiple").select2({
    placeholder: placeholder,
    width: "element"
});
$(".select2-allow-clear").select2({
    allowClear: true,
    placeholder: placeholder,
    width: "element"
});

// @see https://github.com/ivaynberg/select2/commit/6661e3
function repoFormatResult(repo) {
    var markup = "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
        "<div class='select2-result-repository__meta'>" +
        "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

    if (repo.description) {
        markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
    }

    markup += "<div class='select2-result-repository__statistics'>" +
        "<div class='select2-result-repository__forks'><span class='glyphicon glyphicon-flash'></span> " + repo.forks_count + " Forks</div>" +
        "<div class='select2-result-repository__stargazers'><span class='glyphicon glyphicon-star'></span> " + repo.stargazers_count + " Stars</div>" +
        "<div class='select2-result-repository__watchers'><span class='glyphicon glyphicon-eye-open'></span> " + repo.watchers_count + " Watchers</div>" +
        "</div>" +
        "</div></div>";

    return markup;
}

function repoFormatSelection(repo) {
    return repo.full_name;
}

$(".select2-remote").select2({
    placeholder: "Search for a GitHub Repository",
    width: "element",
    minimumInputLength: 1,
    // instead of writing the function to execute the request we use Select2's convenient helper
    ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: "json",
        quietMillis: 250,
        data: function (term, page) {
            return {
                // search term
                q: term
            };
        },
        results: function (data, page) {
       ...