JSFiddle - React, Tailwind, and code Playground

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;">
  <option></option>
  
</select>

JavaScript

var DEFAULT_OPTIONS = [
    { id: 'def1', text: 'Marry'},
    { id: 'def2', text: 'Julia' },
    { id: 'def3', text: 'Anna' },
   //your options goes here
];

var AJAX_OPTIONS = [
    { id: '1', text: 'Tom' },
    { id: '2', text: 'Mark' },
    { id: '3', text: 'Peter' },
  //your options goes here
];

var lastOptions = DEFAULT_OPTIONS;

$(document).ready(function() {
    $('#select').select2({
    minimumInputLength: 0,
    tags:true,
		placeholder: "Search for an Item",
    data:lastOptions,
    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 });
        }
    }
});
});