Select 2Official Website

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

CSS
<!-- select 2 css -->
<script type='text/javascript' src='{% static 'libs/select2/dist/css/select2.min.css'%}'></script>
CSS
<!-- select 2 js -->
<script type='text/javascript' src='{% static 'libs/select2/dist/js/select2.min.js'%}'></script>
Initjs (Custom js)
<!-- app js -->
<script src="{% static 'js/pages/form-advanced.init.js'%}"></script>
Add Package
yarn add select2 --save
Remove Package
yarn remove select2 or you can remove package by removing specific package from package.json
Examples:
Title HTML
Single Select 
<select class="form-control select2">
<option>Select</option>
<optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
</optgroup>
<optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>    
</optgroup>
<optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>   
</optgroup>
<optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>    
</optgroup>
</select>
Multiple Select 
<select class="select2 form-control select2-multiple"
    multiple="multiple" data-placeholder="Choose ...">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>       
    </optgroup>
    <optgroup label="Mountain Time Zone">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
    </optgroup>
    <optgroup label="Central Time Zone">
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
    </optgroup>
    <optgroup label="Eastern Time Zone">
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
    </optgroup>
</select>
Search Disable 
<select class="form-control select2-search-disable">
    <option>Select</option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>        
    </optgroup>
</select>
Ajax (remote data) 
<select class="form-control select2-ajax"></select>
Templating 
<select class="form-control select2-templating">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>
</select>
© Skote.