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:
