Select2
Generates a select input using the select2 plugin (https://select2.github.io).
Dependencies
Select2 elements need the PulsarFormComponent
to be included in your browserify configuration.
Depending on your setup, this will probably need to be in be in a file called index.js
or main.js
.
var PulsarFormComponent = require('/path/to/pulsar/PulsarFormComponent');
$(function () {
var $html = $('html');
pulsarForm = new PulsarFormComponent($html);
pulsarForm.init();
});
This will then affect all select elements with the js-select2
class (which will be included automatically if you're using the helpers).
Example usage
{{
form.select2({
'label': 'Pick a colour',
'id': 'foo',
'options': {
'': 'Choose',
'colour_red': 'Red',
'colour_blue': 'Blue'
}
})
}}
See the Pen form - select2 by Pulsar (@pulsar) on CodePen.
Options applied to parent wrapper
Option | Type | Description |
---|---|---|
class | string | A space separated list of class names |
guidance | string | Text to be displayed in a popover, adds a (?) icon after the input |
guidance-container | string | Element to bind guidance popover scroll behaviour to (default body ) |
help | string | Additional guidance information to be displayed next to the input |
label | string | Text for the <label> companion element |
required | bool | Visually indicates that the field must be completed |
Options applied to the input
Option | Type | Description |
---|---|---|
data-html | string | If true , uses Select2's templating functions to parse HTML within options |
disabled | string | Stops the element from being interactive if value = 'disabled' |
form | string | Specific one or more forms this label belongs to |
id | string | A unique identifier, will also be used as the label's for attribute |
multiple | boolean | Whether multiple options can be selected |
name | string | The name of this control |
options | hash | The <option> attributes formatted as { 'value': 'label' } |
required | bool | Adds required and aria-required="true" attributes |
selected | string | The id of the item in options that should be initially selected |
size | int | The number of items to display when the list is shown |
data-* | string | Data attributes, eg: 'data-foo': 'bar' |
*Any other options not listed here will be applied to the input.
Manually creating select2 elements
The select2 plugin will be called on any select
element that contain the js-select2
class.
Using HTML in select options
With the select2 helper you can include HTML within your <option>
labels, the whole option label will be wrapped in a <span>
.
Note: 'true' here must be a string, not a boolean due to the way the attribute parser works.
{{
form.select2({
'label': 'Pick a colour',
'id': 'example-select',
'data-html': 'true',
'options': {
'': 'Choose',
'colour_red': '<span style="color: red">Red</span>',
'colour_blue': '<span style="color: blue">Blue</span>'
}
})
}}
See the Pen form - select2 html by Pulsar (@pulsar) on CodePen.