aurelia selectize simple custom element

install + aurelia.json mods

npm install selectize - save
npm install jquery -save 

add this to the aurelia.json file in the dependencies section of the vendor bundle 

"jquery",

{
            "name": "selectize",
            "path": "../node_modules/selectize/dist",
            "main": "js/standalone/selectize",
            "deps": ["jquery"],
            "export" : "$",
            "resources": [
              "./css/selectize.bootstrap3.css"
            ]
}

model.html

<template>
    <selectize-element selected.two-way="selectedTags"
                       options.two-way="availableTags"
                       placeholder="Enter a selection"
                       name="tags"m>
    </selectize-element>
</template>

model.ts

   
export class Model {

    availableTags = [
       { id: 1, name: 'Alice' },
       { id: 2, name: 'Bob' },
       { id: 3, name: 'Chris' },
       { id: 4, name: 'Della' }  
    ];

    selectedTags = ['1','3']

}

selectize-element.html

<template>

  <require from="selectize/css/selectize.bootstrap3.css"></require>

  <select value.two-way="selected"
          name.one-way="name"
          id.one-way="name"
          multiple="multiple"
          data-placeholder.one-way="placeholder"
          size="1"
          ref="mySelect">
    <option repeat.for="option of options"
            value.bind="option.id">
            ${option.name}
    </option>
  </select>

</template>

selectize-element.ts

import {bindable, inject} from 'aurelia-framework';
import * as $ from  'jquery';
import 'selectize';

@inject(Element)
export class SelectizeElement {
  @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;
  element : Element;

  mySelect : any;

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

  attached() {
 
    /* note : somebody deserves credit for the cleverness below ( not monkeyhouse ) */

    var el = $(this.element).find('select');
    this.sel = el.selectize({
     plugins: ['remove_button'],
      onChange: function() {
       var notice = new Event('change', null); /* {bubble: false}*/
       el[0].dispatchEvent(notice);
      }
    });
    this.sel[0].selectize.setValue(this.selected);
  }

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

I updated the gist with a selectize element to reflect the way I currently use selectize in au project