Forms

Select 2

Select2 is a jQuery based replacement for select boxes.

Requirements

// Css
<link rel="stylesheet" href="css/vendor/select2.min.css" />
<link rel="stylesheet" href="css/vendor/select2-bootstrap4.min.css" />

// Javascript
<script src="js/vendor/select2.full.min.js"></script>

Example

Javascript
jQuery('#select2Basic').select2({placeholder: ''});
Html
<div class="w-100">
  <label class="form-label">Breads</label>
  <select id="select2Basic">
    <option label="&nbsp;"></option>
    <option value="Breadstick">Breadstick</option>
    <option value="Biscotti">Biscotti</option>
    <option value="Fougasse">Fougasse</option>
    <option value="Lefse">Lefse</option>
    <option value="Melonpan">Melonpan</option>
    <option value="Naan">Naan</option>
    <option value="Panbrioche">Panbrioche</option>
    <option value="Rewena">Rewena</option>
    <option value="Shirmal">Shirmal</option>
    <option value="Tunnbröd">Tunnbröd</option>
    <option value="Vánočka">Vánočka</option>
    <option value="Zopf">Zopf</option>
  </select>
</div>

More Examples

You may find more examples in Interface.Forms.Controls.Select2.html file which is initialized by js/forms/controls.select2.js.

Documentation

https://github.com/select2/select2/