JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="span5">
  <label for="addselect">Users</label>
  <div class="userselector" id="addselect_wrapper">

    <select name="addselect" id="addselect" size="10" class="form-control" style="">

      <optgroup id="toexec" label="All Students (2)">
        <option value="2">Admin User (admin, [email protected])</option>
        <option value="3">Student Test (student, [email protected]</option>
      </optgroup>

    </select>

    <div class="form-inline">
      <label for="addselect_searchtext">Search</label><input type="text" name="addselect_searchtext" id="addselect_searchtext" size="15" value="" class="form-control"><input type="button" value="Clear" class="btn btn-secondary m-x-1" id="addselect_clearbutton"
        disabled=""></div>
  </div>
</div>

JavaScript

$("#addselect_searchtext").on("input",function() {
  var val = this.value.toLowerCase()
  $("#toexec option").each(function() {
    var show = $(this).text().toLowerCase().indexOf(val) !=-1;
    $(this).toggle(show);
    $(this).prop("disabled",!show); // for IE
  })
  $("#addselect_clearbutton").prop("disabled",this.value=="")
});
$("#addselect_clearbutton").on("click",function() {
  $("#addselect_searchtext").val("").trigger("input")
})