JSFiddle - React, Tailwind, and code Playground

by vipTelnet

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<select id="select" value="" style="width:300px;" ></select>

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 });
        }
    }
});