Skip to content

Instantly share code, notes, and snippets.

@monkeyhouse
Last active July 29, 2018 22:14
Show Gist options
  • Save monkeyhouse/fc5bd63ec852bad6b5e3 to your computer and use it in GitHub Desktop.
Save monkeyhouse/fc5bd63ec852bad6b5e3 to your computer and use it in GitHub Desktop.
aurelia selectize simple custom element
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"
]
}
<template>
<selectize-element selected.two-way="selectedTags"
options.two-way="availableTags"
placeholder="Enter a selection"
name="tags"m>
</selectize-element>
</template>
export class Model {
availableTags = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Chris' },
{ id: 4, name: 'Della' }
];
selectedTags = ['1','3']
}
<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>
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();
}
}
@monkeyhouse
Copy link
Author

monkeyhouse commented Dec 26, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment