Select2

Use Select2 to enhance your HTML select elements with search, tagging, remote data sets, infinite scrolling, and many other highly used options.

Step 1: Install Select2

You can install Select2 via yarn.

yarn add select2

Step 2: Include Select2 CSS & Script

Include the Select2 CSS and JS files from your local libs folder.

<!-- select2 CSS -->
<link href="../assets/libs/select2/css/select2.min.css" rel="stylesheet" />

<!-- select2 Script -->
<script src="../assets/libs/select2/js/select2.min.js"></script>

Step 3: Add Select HTML

Create a <select> element and add options for users to choose from.

<select id="select2-1">
    ...
</select>

Step 4: Initialize Select2

Use the following JavaScript code to enable Select2 on the select element, supporting LTR/RTL layouts.

"use strict";

$(function () {
    var dir = $("html").attr("dir") === "rtl" ? "rtl" : "ltr";
    $("#select2-1").select2({
        ...
    });
});

For advanced configuration, events, and styling, visit the Select2 documentation.