> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/forms/select2.md).

# Select2

## Introduction

 [Select2](https://select2.org/) gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

<div align="left"><img src="https://3450431908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQEhO3LIP7yf9jj1Q3z%2F-LRmSsG8dCFyRSef9b17%2F-LRmUr6Co-WyzkzxzqKn%2FScreenshot_2018-11-21%20Protype%20I%20Form%20Element(1).png?alt=media&amp;token=f3919c58-9e3b-498e-87ea-9131703ce1ec" alt=""></div>

## How to Setup

### **HTML Structure**

```markup
<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

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

### JS

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

### Initialize Select2 JS

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