JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.4.2/select2.css">
<script src="http://cdn.jsdelivr.net/select2/3.4.2/select2.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.2/select2.min.js"></script>
<div id="optionsHolder">
   <input id="e1" type="hidden" style="width: 200px;" />
</div>

JavaScript

// Quick search with multi select2
            
/* Prepare our string with 50000 options (this is just for demonstration, do not use this wild concatenation!).
All values are separated by quotes (you should choose the char that most fits your need i.e. does not show up in your options).*/

var availableOptions = '';
for(var i = 0; i < 50000; i++){
   availableOptions += '"DCS.Signal'+ i + '"';
}
            
// Transform all hidden input into multi select2 controls 
$('#optionsHolder input[type="hidden"]').each(function (index) {              
   $(this).select2({
    multiple: true,
    allowClear: true,
    minimumInputLength: 3,
    placeholder: "Type DCS...",
    query: function (query) {
        // Add regex based search
        var search = query.term;
        if (!search)
            return;
        var data = { results: [] }, i, j, s;
        var rx = new RegExp('"([^"]*' + search + '[^"]*)"', 'gi');
        var i = 0, results = '';
        while (result = rx.exec(availableOptions)) {
            data.results.push({ id: result[1], text: result[1] });
            i += 1;
            // no need to display more than 100 options at a time
          /*   if (i >= 100) 
                break; */
        }
        query.callback(data);
    }
   });
});