Skip to main content

Select2

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

The select2 helper is like a regular select but adds extra functionality such as quicksearch, and the ability to add custom markup to your results.

info

Pulsar uses its own fork of SelectWoo, which contains additional accessibility enhancements over the original selectWoo which in turn offers better accessibility support over the original select2.

You can find more information about the Jadu branch of selectWoo, such as screen reader coverage and known bugs on the [Jadu/selectWoo GitHub repo](Jadu/selectWoo GitHub repo)

Dependencies​

tip

Check Pulsar’s package.json for the current version of the selectWoo package that you should be including.

"dependencies": {
  "select2": "github:jadu/selectWoo#jadu-1.1.3"
}
var PulsarFormComponent = require('/path/to/pulsar/PulsarFormComponent');

$(function () {
  var $html = $('html');

  pulsarForm = new PulsarFormComponent($html);
  pulsarForm.init();
});

This will then initialise all select elements with the js-select2 class (which will be included automatically if you’re using the helpers).

Basic usage​

{{
  form.select2({
    'label': 'Pick a colour',
    'id': 'guid-' ~ random(),
    'placeholder': 'Please choose',
    'options': [
      {
        'label': 'Red',
        'value': 'colour_red'
      },
      {
        'label': 'Blue',
        'value': 'colour_blue'
      }
    ]
  })
}}

Helper options​

You can configure this helper using the common helper options.

OptionTypeDescription
multiplebooleanWhether multiple options can be selected (default: false)
optionsarrayAn array of labels and values to use as options
placeholderstringThe placeholder to show when no values are selected
selectedstringThe value of the item in options that should be initially selected
sizeintThe number of options to display when the list is shown

Selected option​

See the regular select documentation.

Disabled options​

See the regular select documentation.

Optgroups​

See the regular select documentation.

Placeholder​

Placeholders can be set using the placeholder option.

tip

For single select select2s, select2 requires an empty option for use with the placeholder. This will be added automatically if you are using the form.select2 helper.

{{
  form.select2({
    'label': 'My label',
    'id': 'guid-' ~ random(),
    'placeholder': 'Please choose',
    'options': [
      {
        'label': 'Red',
        'value': 'colour_red'
      },
      {
        'label': 'Blue',
        'value': 'colour_blue'
      }
    ]
  })
}}