JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<input type="hidden" id="select" value="" style="width:300px;" /><br />
JavaScript
var DEFAULT_OPTIONS = [
{ id: 'def1', text: 'Default Choice 1' },
//your options goes here
];
var AJAX_OPTIONS = [
{ id: '1', text: 'Choice 1' },
//your options goes here
];
var lastOptions = DEFAULT_OPTIONS;
$('#select').select2({
minimumInputLength: 0,
query: function(options) {
if (options.term) {
$.ajax({
type: 'post',
url: '/echo/json/',
dataType: 'json',
data: {
json: JSON.stringify(AJAX_OPTIONS),
delay: 0.3
},
success: function(data) {
lastOptions = data;
options.callback({ results: data });
}
});
} else {
options.callback({ results: lastOptions });
}
}
});