Answer Happy

This is a javascript and HTML problem.
Context: This is a select dropdown that has a for loop from the
jinja template.
<select id="UC" name="unitid"
class="form-control" > required>

<option
value="" hidden>Select some</option>

{% for x in units
%}

<option
value="{{x.unitid}}">{{x.names}}</option>

{% endfor %}

</select>
Problem: Create a javascript function that enables the select
dropdown to be both multi select(select multiple options in the
dropdown) and have a search bar in it. Modify the html code if
necessary. Provide snapshots of the output. Explain what you
did.
Below is an example of what I am looking for with multi select
and a search bar.
Multi-select:
Search Bar:
Alaskan/Hawaiian Time Zone Alaska Hawaii Pacific Time Zone California x Alaska x Hawaii x California

Alaskan/Hawaiian Time Zone Alaska Hawaii Pacific Time Zone A California