JSFiddle - React, Tailwind, and code Playground

by john_s

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<input type="hidden" id="select" value="" style="width:300px;" /><br />
<br />
<button type="button" id="showValue">Show Value</button><br />
<br />
<div id="output">
</div>

JavaScript

var AJAX_OPTIONS = [
    { id: '1', text: 'Choice 1' },
    { id: '2', text: 'Choice 2' },
    { id: '3', text: 'Choice 3' },
    { id: '4', text: 'Choice 4' },
    { id: '5', text: 'Choice 5' }
];

$('#select').select2({
    allowClear: true,
    placeholder: 'Select...',
    ajax: {
        quietMillis: 100,
        type: 'post',
        url: '/echo/json/',
        dataType: 'json',
        data: function(term) {
            return {
                json: JSON.stringify(AJAX_OPTIONS),
                delay: 0.3
            };
        },
        results: function(data) {
            return { results: data };
        }
    }
});

$('#showValue').click(function() {
    $('#output').text($('#select').val());
});