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" multiple = multiple  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...

JavaScript

$(document).ready(function () {
    $('#ioList').select2({
      minimumInputLength: 3,
      allowClear: true,
      placeholder: {
        id: -1,
        text: 'Enter the Student id.',
      },
      ajax: {
        type: 'POST',
        url: '',
        contentType: 'application/json; charset=utf-8',
        async: false,
        dataType: 'json',
        data: function (params) {
            return "{'searchFilter':'" + (params.term || '') + "','searchPage':'" + (params.page || 1) + "'}";
          },

        processResults: function (res, params) {
            var jsonData = JSON.parse(res.d);
            params.page = params.page || 1;
            var data = { more: (jsonData[0] != undefined ? jsonData[0].MoreStatus : false), results: [] }, i;
            for (i = 0; i < jsonData.length; i++) {
              data.results.push({ id: jsonData[i].ID, text: jsonData[i].Value });
            }

            return {
              results: data.results,
              pagination: { more: data.more,
              },
            };
          },
      },
    });

  });