Select2

Introduction

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

How to Setup

HTML Structure

<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>
 </select>

Dependency

CSS

<!-- select2 CSS -->
<link href="vendors/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css" />

JS

<!-- Select2 JavaScript -->
<script src="vendors/select2/dist/js/select2.full.min.js"></script>
<script src="dist/js/select2-data.js"></script>

Initialize Select2 JS

/* Select2 Init*/
"use strict";
$(".select2").select2();
$("#input_tags").select2({
    tags: true,
    tokenSeparators: [',', ' ']
});

Last updated