knockout-selectize is a knockout adapter for the popular selectize.js library. This adapter is capable of two-way-databinding the selected value as well as its options.
> npm install knockout-selectize
With minimal setup:
<select data-bind="selectize: selected, selectizeOptions: availableOptions"></select>With all available properties:
<select data-bind="selectize: selected, selectizeOptions: availableOptions, optionsText: 'name', optionsSearch: 'name', optionsValue: 'id'"></select>This will initialize the selectize in the background. The value provided will be the selected value. It is recommended to put in a knockout observable in there.
An array of objects that'll be passed to selectize.js. If this array is a knockout observableArray the options will be modifiable at runtime.
Defines a placeholder when nothing is selected.
Defines which object key to use for the option text / label.
Defines which object key to use for search.
Defines which object key to used as form value.
A big thanks goes to DrSammyD with his gist: https://gist.github.com/DrSammyD/3ae055ca1280ccd9a4ae. Also I was able to reuse some of the thoughts that were put in this angular directive: https://github.com/machineboy2045/angular-selectize/blob/master/dist/angular-selectize.js