ColdFusion - Autopopulate Next Select Fields - Searchable

Question

I am going back to a simple drop down form that when selected. It populates the next selections below it. So a Category say Fruit... Then the SubCategory is autopopulated in the select with "Apple, Orange, Bananna, etc" But I'd like the select field searchable. I know it can be done, but I need to preserve the option value which is a unique identifier. I can't seem to figure out how to make the select searchable. So starting back at scratch. Unless anyone has better ideas on how to do a searchable select field. That then populates another select field that is searchable.

So both select fields need to be searchable, yet preserve the option value too.

Perhaps there is a newer easier way?

    <cfquery name="catlist" datasource="ds_source">
    select * from ecat
    order by catname
    </cfquery>
    <cfquery name="sublist" datasource="ds_source">
    select * from esubcat
    order by subcatname
    </cfquery>

    <script language="JavaScript1.2"> 
    function whichCategory(obj){ 
                switch (obj.ecat.selectedIndex){ 
                
                <cfoutput query=catlist group=catname>
                
                case #catlist.currentrow#:
                <cfquery name="sublist" datasource="ds_source">
                select * from esubcat
                where ecatid = '#catlist.ecatid#'
                order by subcatname
                </cfquery>
                <cfoutput>
                obj.esubcat.length=#sublist.recordcount# 
                </cfoutput>
                <cfset cr = 0>
                <cfloop query=sublist>
                <cfoutput>
                obj.esubcat.options[#cr#].value="#esubcat#" 
                obj.esubcat.options[#cr#].text="#subcatname#"
                </cfoutput>
                <cfset cr = cr +1>
                </cfloop>
                break; 
                </cfoutput> 
                
                } 
           } 
        </script> 

    Category: <br>
    <select name="ecat" onchange="whichCategory(this.form)"> 
   <option value="">- Select Category -</option> 
    <cfoutput query=catlist group=catname>
    <option value="#ecatid#">#catname#</option> 
    </cfoutput>
    </select> 

    <br>
    SubCategory: <br>
    <select name="esubcat" onchange="whichCategory(this.form)"> 
         <option value="">First Select Category Above</option> 
      </select> 

I found this online. And it works for the search. But it deactivates the second selection of things.

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>

      <script language="JavaScript">
        $(document).ready(function () {
        $('select').selectize({
        sortField: 'text'
       });
      });
      </script>