Aurelia + selectize multiselect

aurelia_selectize.txt

# start with es2016 skeleton
jspm install jquery
jspm install selectize

selectize-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" size="1">
    <option repeat.for="option of options" value.bind="option.value">${option.label}</option>
  </select>
</template>

selectize-multiselect.js

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

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

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

  attached() {
    var el = $(this.element).find('select');
    this.sel = el.selectize({
      plugins: ['remove_button'],
      onChange: function() {
        // bubble it up to allow change handler on custom element, and to trigger data binding on original select element
        var notice = new Event('change', {bubbles: true});
        $(el)[0].dispatchEvent(notice);
      }
    });
    this.sel[0].selectize.setValue(this.selected);
    console.log("selectize attached");
  }

  detached() {
    this.sel[0].selectize.destroy();
    console.log("selectize detached");
  }
}

welcome.html

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

  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="submit()">
      <div class="form-group">
        <label for="options">Options</label>
        <selectize name="options" selected.bind="selected" options.bind="options" placeholder="Enter a selection"></selectize>
      </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"];
  }

}

after working with both, i recommend select2 over selectize due to its 4.0 major rewrite. see my other gist here: https://gist.github.com/mujimu/c2da3ecb61f832bac9e0