<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () { 
    //copy options
    var options = $('#theList option').clone();
    //react on keyup in textbox
    $('#myInput').keyup(function () {
      var val = $(this).val();
      $('#theList').empty();
      //take only the options containing your filter text or all if empty
      options.filter(function (idx, el) {
        return val === '' || $(el).text().indexOf(val) >= 0;
      }).appendTo('#theList');//add it to list
     });
  });
</script>
<style>
</style>
</head>
<body>

<h2>Filterable Table</h2> 
<input type="search" name="theList" id="myInput" placeholder="Type to filter">
<select id="theList">
    <option>John</option>
    <option>Doe</option>
    <option>john@example.com</option>
    <option>Mary</option>
    <option>Moe</option>
    <option>mary@mail.com</option>
    <option>July</option>
    <option>Dooley</option>
    <option>july@greatstuff.com</option>
    <option>Anja</option>
    <option>Ravendale</option>
    <option>a_r@test.com</option>
</select>
</body>
</html>