How to add search feature inside select tag without using <datalist>

Question

I want to a search bar to search the option in the option list. I want to do without adding any plugin for example: searchit, search2 or many more. I want to add using just javascript or bootstrap plugin only

<% @title="Add Supplier" %>

<div class="container">
    <div class="row">
        <div class="col-6 mx-auto my-auto">
        <h1 class="center mt-4">Add supplier</h1>
            <%= form_with(model: @supplier, local: true, data: { turbo: false }) do |f| %>
                <%= render 'shared/error_messages' , object: f.object%>

                <%= f.label :Company, class: 'required form-label'%>
                <%= f.text_field :company_id, value:current_user.company.name, class: 'form-control', :readonly => true %>
                <%= f.hidden_field :company_id, value: current_user.company.id %>

                <%= f.label :first_name, class: 'required form-label' %>
                <%= f.text_field :first_name, class: 'form-control', required: true %>

                <%= f.label :last_name, class: 'required form-label' %>
                <%= f.text_field :last_name, class: 'form-control', required: true %>

                <%= f.label :username, class: 'required form-label' %>
                <%= f.text_field :username, class: 'form-control', required: true %>

                <%= f.label :email, class: 'required form-label' %>
                <%= f.email_field :email, class: 'form-control', required: true %>

                <%= f.label :phone_number, class: 'required form-label' %>
                <%= f.text_field :phone_number, class: 'form-control', required: true%>

                <button type='button' class = "btn btn-warning my-2" onclick="addMore()">Add Item</button>
                <div id="original-inputs">
                    <div class="row">
                        <div class="col-4">
                            <%= f.label :item, class: 'required form-label'%>
                            <% items = Item.where(company_id: current_user.company.id)%>
                           <div>
                                <select class="form-select" searchable="Search here..." name="[supplier_item][item_ids][]">
                                    <option></option>
                                    <% items.each do |item| %>
                                        <option value="<%= item.id %>">
                                            <%= item.item_code %>
                                            <%= item.name %>
                                        </option>
                                    <% end %>
                                </select>
                            </div>
                        </div> 

                        <div class="col-4">
                            <%= f.label :location, class: 'required form-label' %>
                            <% locations = Location.where(company_id: current_user.company.id)%>
                            <%= text_field_tag "[supplier_item][location_ids][]", nil , {list: 'browser-location', class: 'form-control'} %>
                            <datalist id="browser-location" >
                                <% locations.each do |location| %>
                                    <option value="<%= location.id %>">
                                        <%= location.location_code %>
                                        <%= location.name %>
                                    </option>
                                <% end %>
                            </datalist>
                        </div> 

                        <div class="col-4">
                            <%= f.label :supplier_price, class: 'required form-label' %>
                        <%=  number_field_tag "[supplier_item][supplier_prices][]", nil, step: :any, class: 'form-control'  %>
                        
                    </div>
                </div>

                </div>

                <div id="dynamic-inputs"></div>

                <div class="d-grid gap-2 my-2">
                    <%= f.submit "Create Supplier", class: "btn btn-primary" %>
                    <%= link_to 'Back', suppliers_path, class: 'btn btn-success' %>
                </div>
            <% end %>
        </div>
    </div>
</div>

<script type="text/javascript">
    function addMore(){
        $("#dynamic-inputs").append($("#original-inputs").html())
    }
</script>

This is the code. I also don't want to use datalist tag because i need to send the item value to backend.I just want to add search bar inside the select tag