Select2

We have included select2 plugin for enhanced select options. select2 is free and open source plugin you can check it here https://select2.org

Setup

Step 1

Add the plugin css before the atlas stylesheet as we have tuned it according to the scheme of our admin panel

<link rel="stylesheet" href="assets/vendor/select2/css/select2.min.css">

Step 2

Include plugin Javascript file before </body>

<script src="assets/vendor/select2/js/select2.full.min.js" type="text/javascript"></script>

Step 3

Add .js-select class as selector

<select  class="form-control js-select2">
    <option selected>Apple Pie</option>
    <option>Cup Cake</option>
    <option>Donut</option>
    <option>Eclair</option>
    <option>Froyo</option>
    <option>GingerBread</option>
    <option>HoneyComb</option>
    <option>Ice Cream Sandwich</option>
    <option>Jellybean</option>
    <option>Kitkat</option>
    <option>Lollipop</option>
    <option>Marshmallow</option>
    <option>Nougat</option>
    <option>Oreo</option>
</select>

Step 4

Initialize the plugin

$(".js-select2").select2();

Select2 Tag Input

you also have multiple inputs by using multiple attribute with select tag

<select multiple class="form-control js-select2">
    <option selected>Apple Pie</option>
    <option>Cup Cake</option>
    <option>Donut</option>
    <option>Eclair</option>
    <option>Froyo</option>
    <option>GingerBread</option>
    <option>HoneyComb</option>
    <option>Ice Cream Sandwich</option>
    <option>Jellybean</option>
    <option>Kitkat</option>
    <option>Lollipop</option>
    <option>Marshmallow</option>
    <option>Nougat</option>
    <option>Oreo</option>
</select>

For more options refer

Select2select2.org