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"];
  }

}

Hello,

First of many thanks for your help on the gitter channel and then taking the time to do this. I followed your instructions but i'm getting errors, let me go through what I did.

got es2016 skeleton
npm install
jspm install -y
jspm install jquery
jspm install select2
jspm install lodash

then i added the two files for select2 on your example (html and js)
changed both the welcome.html and the welcome.js

gulp watch

then the errors that i get are:
GET http://localhost:9000/dist/css.js 404 (Not Found)
ERROR [app-router] Error: XHR error (404 Not Found) loading http://localhost:9000/dist/css.js(…)
ERROR [app-router] Router navigation failed, and no previous location could be restored.

I'm going to keep working on it to see if I can figure out what happened,

The biggest problem was the exclamation point on the import 'select2/css/select2.min.css!' once i removed the exclamation point it gave me another error that it couldn't find the css which by looking at chrome debugger on the source tab i noticed the css folder was not loaded under the jspm packages (don't know why).

This is what I had to do to make it work, not sure why it works for you and not for me, but here it goes in case someone experiences the same problem, see below:

• remove the line import 'select2/css/select2.min.css!' from the select2-multiselect.js file
• add a line on the index.html to import the css: <link rel="stylesheet" href="jspm_packages/github/select2/select2@4.0.1/css/select2.min.css">

@lmaspoch, I know this is months late, but in order to load CSS files with SystemJS, you need to install the css plugin: jspm install css

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