JSFiddle - React, Tailwind, and code Playground

HTML

<input id="textbox" type="text" placeholder="type here to search" />
<select id="selectedClientId" size="5">
  <option class="1" value="battest">battest</option>
  <option class="2" value="234567890">234567890</option>
  <option class="3" value="cora">cora</option>
  <option class="4" value="democlient">democlient</option>
  <option class="5" value="altexTest">altexTest</option>
  </select>

JavaScript

jQuery.fn.filterByText = function(textbox) {
          return this.each(function() {
            var select = this;
            var options = [];
            $(select).find('option').each(function() {
              options.push({value: $(this).val(), text: $(this).text()});
            });
            $(select).data('options', options);
            $(textbox).bind('change keyup', function() {
              var options = $(select).empty().scrollTop(0).data('options');
              var search = $.trim($(this).val());
              var regex = new RegExp(search,'gi');

              $.each(options, function(i) {
                var option = options[i];
                if(option.text.match(regex) !== null) {
                  $(select).append(
                     $('<option>').text(option.text).val(option.value)
                  );
                }
              });
            });
          });
        };

    $(function() {
    
        $('#selectedClientId').filterByText($('#textbox'), false);
      $("#selectedClientId").change(function(){
        
        alert("you have selected ++ " + $(this).val());
      });
    });