Aurelia + select2 v4.0 multiselect

aurelia_select2_4.0.txt

# start with es2016 skeleton
jspm install jquery
jspm install select2
jspm install css   # assure css handler in place for systemjs

select2-multiselect.html

<template>
  <select value.two-way="selected" name.one-way="name" id.one-way="name" class="form-control" multiple data-placeholder.one-way="placeholder" data-allow-clear.one-way="allow_clear" size="1">
    <option repeat.for="option of options" value.bind="option.value">${option.label}</option>
  </select>
</template>

select2-multiselect.js

import {bindable, inject, customElement} from 'aurelia-framework';
import $ from 'jquery';
import 'select2';
import 'select2/css/select2.min.css!'
import _ from 'lodash'

@customElement('select2')
@inject(Element)
export class Select2CustomMultiselect {
  @bindable name = null;    // name/id of custom select
  @bindable selected = [];  // default selected values
  @bindable options = {};   // array of options with id/name properties
  @bindable placeholder = "";
  @bindable allow_clear = false;

  constructor(element) {
    this.element = element;
  }

  attached() {
    var el = $(this.element).find('select');
    var sel = el.select2();

    // preload selected values
    sel.val(this.selected).trigger('change');

    // on any change, propagate it to underlying select to trigger two-way bind
    sel.on('change', (event) => {
      // don't propagate endlessly
      // see: http://stackoverflow.com/a/34121891/4354884
      if (event.originalEvent) { return; }
      // dispatch to raw select within the custom element
      // bubble it up to allow change handler on custom element
      var notice = new Event('change', {bubbles: true});
      $(el)[0].dispatchEvent(notice);
    });

    console.log("select2 attached");
  }

  detached() {
    $(this.element).find('select').select2('destroy');
    console.log("select2 detached");
  }
}

welcome.html

<template>
  <require from="select2-multiselect"></require>

  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="submit()">
      <div class="form-group">
        <label for="options">Options</label>
        <select2 name="options" selected.bind="selected" options.bind="options" placeholder="Enter a selection" allow_clear="true"></select2>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
</template>

welcome.js

//import {computedFrom} from 'aurelia-framework';

export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';
  options = [];
  selected = [];

  submit() {
    alert(`you selected: ${this.selected}`);
    return false;
  }

  activate() {
    console.log('activate');
    this.options = [
      {label: 'First Option', value: "1"},
      {label: 'Second Option', value: "2"},
      {label: 'Third Option', value: "3"}
    ];

    this.selected = ["3","1"];
  }

}

thanks @LordZardeck , updated gist to reflect that

I had to do this with Select version 4.x.x and above: jspm install select2 -o "{ format: 'global' } "

Just a few improvements I suggest, include the CSS + bootstrap-CSS in the template, and also allow binding of "style" to select2 element, ex. select2-multiselect.html:

${option.label}

then change the select2-multiselect.js a little:
export class Select2CustomMultiselect {
@bindable name = null; // name/id of custom select
@bindable selected = []; // default selected values
@bindable options = {}; // array of options with id/name properties
@bindable placeholder = "";
@bindable allow_clear = false;
@bindable style = ""; // NEW to allow custom style pass-thrus

constructor(element) {
this.element = element;
}

attached() {
var el = $(this.element).find('select');
var sel = el.select2({theme: "bootstrap" }); // to use the theme

Sorry the html for the select2:

<template>
  <require from="select2/css/select2.min.css"></require>
  <require from="select2-bootstrap-theme/dist/select2-bootstrap.min.css"></require>

  <select value.two-way="selected" name.one-way="name" id.one-way="name" class="form-control" style.one-way="style" multiple data-placeholder.one-way="placeholder" data-allow-clear.one-way="allow_clear" size="1">
    <option repeat.for="option of options" value.bind="option.value">${option.label}</option>
  </select>
</template>

Oh I forgot to mention we had to include that NPM package:

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

I've posted my revised code with some important fixes to your code (which was a great starting point):

https://github.com/codefreeze8/aurelia-select2

See this blog for a picture of how it looks

http://codehot.io/aurelia-select2/

I'm trying to add tags=true as a bindable so I can add values to list but not successful yet.
Appeciate any help. See https://select2.org/tagging