Aurelia: Select2

I really like the power of the select2 element, and needed to use it in an aurelia project.

There are a few aurelia custom elements out there, but of those I saw, none gave a very simple, lightweight wrapper that would allow me to use HTML within the multi-select.

This attached code does, just include these bundles:

jspm install jquery
jspm install select2
jspm install bootstrap
jspm install npm:select2-bootstrap-theme

Inside your controller, there are 2 variables you need: the “selected” array and the options listing.

The options listing has 3 keys: “value” (the option value), “label” (the text-label), and “label_full” (the html label, if this not included, it uses the text label).

For example in mycontroller.js:

this.selectedArray = [];
this.optionsArray = [
{label: “Option 1”, label_full: “<i class=’glyph-icon icon-book’></i> Option 1”, value: 10},
{label: “Option 2”, label_full: “<i class=’glyph-icon icon-coffee’></i> Option 2”, value: 20} ];

Now in your aurelia template include the custom element:

And add the tags where you are using them:

What you will end up with a a powerful multi-select that can even have icons, like this: