### HTML Examples for Stimulus Select2 Integration

Source: https://context7.com/joargp/stimulus-select2/llms.txt

Demonstrates how to use the `data-controller="select2"` attribute on select elements for basic single and multi-select configurations with placeholders and styling.

```html
<!-- Basic single select with placeholder -->
<select
  data-controller="select2"
  data-select2-placeholder="Pick a color"
  data-select2-width="style"
  style="width: 100%"
>
  <option></option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="red">Red</option>
</select>

<!-- Multi-select example -->
<select
  multiple
  data-controller="select2"
  data-select2-placeholder="Pick colors"
  data-select2-width="style"
  style="width: 100%"
>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
</select>
```

--------------------------------

### JavaScript Setup for Stimulus Select2

Source: https://context7.com/joargp/stimulus-select2/llms.txt

Installs the stimulus-select2 package and registers the Select2Controller with the Stimulus application. This setup requires jQuery and Select2 to be installed and imported.

```javascript
// Installation
// npm install stimulus-select2 @hotwired/stimulus jquery select2

// JavaScript setup
import { Application } from "@hotwired/stimulus";
import Select2Controller from "stimulus-select2";
import "select2";
import "select2/dist/css/select2.css";

const application = Application.start();
application.register("select2", Select2Controller);
```

--------------------------------

### Install Stimulus-Select2 and Dependencies

Source: https://github.com/joargp/stimulus-select2/blob/master/README.md

Installs the stimulus-select2 package along with its core dependencies: @hotwired/stimulus, jQuery, and select2. This command ensures all necessary libraries are available for the integration.

```bash
npm install stimulus-select2 @hotwired/stimulus jquery select2
```

--------------------------------

### HTML Structure for Select2 Controller

Source: https://github.com/joargp/stimulus-select2/blob/master/README.md

Provides an example of the HTML structure required to use the stimulus-select2 controller. The `data-controller="select2"` attribute initializes the controller, while `data-select2-*` attributes are passed as options to Select2.

```html
<select
  data-controller="select2"
  data-select2-placeholder="Pick a color"
  data-select2-width="style"
>
  <option></option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="red">Red</option>
</select>
```

--------------------------------

### Initialize Stimulus Application and Register Select2 Controller

Source: https://github.com/joargp/stimulus-select2/blob/master/playground/index.html

This JavaScript snippet initializes the Stimulus application and registers the StimulusSelect2 controller. It's a common pattern for starting Stimulus applications and making custom controllers available. No external dependencies beyond Stimulus.js and the Select2 library are explicitly shown here.

```javascript
(function() { const application = Stimulus.Application.start(); application.register("select2", StimulusSelect2); })();
```

--------------------------------

### Initialize Stimulus with Select2 Controller

Source: https://github.com/joargp/stimulus-select2/blob/master/README.md

Demonstrates how to import and register the Select2Controller with the Stimulus application. It also imports the necessary Select2 JavaScript and CSS files, ensuring they are loaded before the controller connects.

```javascript
import { Application } from "@hotwired/stimulus";
import Select2Controller from "stimulus-select2";
import "select2";
import "select2/dist/css/select2.css";

const application = Application.start();
application.register("select2", Select2Controller);
```

--------------------------------

### Initialize Stimulus-Select2 Controller

Source: https://github.com/joargp/stimulus-select2/blob/master/demo/index.html

This JavaScript snippet initializes the Stimulus application and registers the StimulusSelect2 controller. It's a common pattern for setting up Stimulus controllers in a web application.

```javascript
(() => {
  const application = Stimulus.Application.start();
  application.register("select2", StimulusSelect2);
})();
```

--------------------------------

### UMD Browser Usage for Stimulus Select2

Source: https://context7.com/joargp/stimulus-select2/llms.txt

Shows how to include stimulus-select2 in non-bundled environments using script tags. This method requires loading jQuery, Select2, Stimulus, and the stimulus-select2 UMD bundle in the correct order.

```html
<!doctype html>
<html>
<head>
  <link href="node_modules/select2/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
  <select
    id="colors"
    data-controller="select2"
    data-select2-placeholder="Pick a color"
    data-select2-width="style"
    style="width: 100%"
  >
    <option></option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="red">Red</option>
  </select>

  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/select2/dist/js/select2.full.min.js"></script>
  <script src="https://unpkg.com/@hotwired/stimulus/dist/stimulus.umd.js"></script>
  <script src="dist/index.umd.js"></script>
  <script>
    (() => {
      const application = Stimulus.Application.start();
      application.register("select2", StimulusSelect2);
    })();
  </script>
</body>
</html>
```

--------------------------------

### Accessing Stimulus Select2 Controller Properties

Source: https://context7.com/joargp/stimulus-select2/llms.txt

Illustrates how to access internal properties of the Select2Controller, such as the jQuery instance, the wrapped select element, and parsed Select2 options. This is useful for debugging or extending controller functionality.

```javascript
// Accessing controller properties programmatically
// controller.jQuery - Returns the jQuery instance (window.jQuery or imported $)
// controller.select - Returns the jQuery-wrapped select element
// controller.options - Returns parsed Select2 options from data attributes

// Example: data-select2-placeholder="Pick" data-select2-width="style"
// Results in options: { placeholder: "Pick", width: "style" }

// The parseSelect2OptionName utility converts attribute names:
// "select2Placeholder" -> "placeholder"
// "select2Ajax" -> "ajax"
// "select2AllowClear" -> "allowClear"
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.