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.

results matching ""

    No results matching ""