JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link rel="stylesheet" href="https://select2.github.io/dist/css/select2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="ioList" style="width:300px;"><option value="0">item 0</option><option value="1">item 1</option><option value="2">item 2</option><option value="3">item 3</option><option value="4">item 4</option><option value="5">item 5</option><option value="6">item 6</option><option value="7">item 7</option><option value="8">item 8</option><option value="9">item 9</option><option value="10">item 10</option><option value="11">item 11</option><option value="12">item 12</option><option value="13">item 13</option><option value="14">item 14</option><option value="15">item 15</option><option value="16">item 16</option><option value="17">item 17</option><option value="18">item 18</option><option value="19">item 19</option><option value="20">item 20</option><option value="21">item 21</option><option value="22">item 22</option><option value="23">item 23</option><option value="24">item 24</option><option value="25">item 25</option><option value="26">item 26</option><option value="27">item 27</option><option value="28">item 28</option><option value="29">item 29</option><option value="30">item 30</option><option value="31">item 31</option><option value="32">item 32</option><option value="33">item 33</option><option value="34">item 34</option><option value="35">item 35</option><option value="36">item 36</option><option value="37">item 37</option><option value="38">item 38</option><option value="39">item 39</option><option value="40">item 40</option><option value="41">item 41</option><option value="42">item...
JavaScript
$.fn.select2.amd.require(
['select2/data/array', 'select2/utils'],
function (ArrayData, Utils) {
function CustomData($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
}
function contains(str1, str2) {
return new RegExp(str2, "i").test(str1);
}
Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
if (!("page" in params)) {
params.page = 1;
}
var pageSize = 50;
var results = this.$element.children().map(function(i, elem) {
if (contains(elem.innerText, params.term)) {
return {
id:[elem.innerText, i].join(""),
text:elem.innerText
};
}
});
callback({
results:results.slice((params.page - 1) * pageSize, params.page * pageSize),
pagination:{
more:results.length >= params.page * pageSize
}
});
};
$("#ioList").select2({
ajax:{},
allowClear:true,
width:"element",
multiple:true,
dataAdapter:CustomData
});
});