# Select2 — Searchable Dropdown Select Boxes for the Web

> A jQuery-based replacement for native select elements that adds search, tagging, remote data loading, and infinite scrolling to dropdown menus with full accessibility support.

## Install

Save as a script file and run:

# Select2 — Searchable Dropdown Select Boxes for the Web

## Quick Use
```bash
npm install select2
```
```html
<link rel="stylesheet" href="select2/dist/css/select2.min.css">
<script src="jquery.min.js"></script>
<script src="select2/dist/js/select2.min.js"></script>
<script>
  $('#my-select').select2({ placeholder: 'Pick an option' });
</script>
```

## Introduction
Select2 replaces standard HTML `<select>` elements with feature-rich dropdown controls. It adds type-ahead search, multi-select tagging, remote data sources via Ajax, and theming support while remaining accessible via keyboard and screen readers.

## What Select2 Does
- Converts native `<select>` and `<input>` elements into searchable, themeable dropdowns
- Supports multi-value selection with tagging and token-based input
- Loads options dynamically from remote APIs with built-in Ajax integration and infinite scrolling
- Provides internationalization with over 40 language packs
- Works with large option sets by virtualizing the dropdown list for performance

## Architecture Overview
Select2 wraps the original `<select>` element, hiding it and rendering a custom dropdown container. User interactions on the custom UI synchronize back to the hidden native element, ensuring form submissions and validation still work. The data adapter pattern allows plugging in local arrays, Ajax endpoints, or custom data sources. Decorators extend core behavior for features like minimum input length, tags, and tokenizers.

## Self-Hosting & Configuration
- Install via npm, Yarn, or include from a CDN alongside jQuery
- Initialize on any `<select>` element with `$(selector).select2(options)`
- Configure `ajax.url` and `ajax.processResults` to load options from a remote endpoint
- Use `templateResult` and `templateSelection` callbacks to customize how options render
- Apply themes (default, Bootstrap 4/5, Material) by loading the corresponding CSS file

## Key Features
- Type-ahead search filters large option lists instantly in the browser
- Tagging mode lets users create new options on the fly, turning the select into a token input
- Remote data loading with debounced Ajax requests and pagination support for huge datasets
- Theme system with official Bootstrap and community themes for visual consistency
- Full keyboard navigation and ARIA attributes for accessibility compliance

## Comparison with Similar Tools
- **Choices.js** — vanilla JavaScript alternative with no jQuery dependency; Select2 has broader feature set and larger community
- **Tom Select** — modern fork of Selectize.js with no jQuery requirement and better performance; Select2 has wider adoption in legacy jQuery projects
- **Slim Select** — lightweight zero-dependency select replacement; lacks Select2's Ajax and theming depth
- **React Select** — purpose-built for React with hooks support; Select2 is framework-agnostic but requires jQuery
- **Selectize.js** — similar feature set but no longer actively maintained; Select2 continues to receive updates

## FAQ
**Q: Does Select2 require jQuery?**
A: Yes, Select2 v4 depends on jQuery. If you need a vanilla JS solution, consider Choices.js or Tom Select as alternatives.

**Q: How do I load options from an API?**
A: Pass an `ajax` configuration object with `url`, `dataType`, and a `processResults` function that maps your API response to `{ id, text }` objects.

**Q: Can Select2 handle thousands of options without lag?**
A: Yes. For very large local datasets, enable `minimumInputLength` to defer rendering until the user types. For remote data, use Ajax with server-side filtering and pagination.

**Q: How do I style Select2 to match Bootstrap?**
A: Install the `select2-bootstrap-5-theme` package and set `theme: "bootstrap-5"` in your Select2 configuration.

## Sources
- https://github.com/select2/select2
- https://select2.org/

---
Source: https://tokrepo.com/en/workflows/asset-85e43b5c
Author: Script Depot