Selectize.js binding for Knockout.js


This is a custom binding for using Selectize.js with your Knockout.js powered application.

Selectize is an HTML select alternative (like Select2, Chosen). Knockout is an MVVM framework for Javascript.

This custom binding wraps the built-in options binding of Knockout.js. So, additional parameters like optionsValue, optionsText, optionsCaption, etc. can be used with this binding. See official documentation for further details. By default, the selectize binding uses id for optionsValue and name for optionsText.

By default, the text Choose... is used as optionsCaption. You can use optionsCaption: null for no captions (first item is selected by default).

The custom binding is available from

Example files are also available from

Warning: This binding wraps the built-in options binding of Knockout.js and doesn't provide the whole object to Selectize and therefore options like searchField do not work out of the box.

1. Using selectize with plain select tag, with values built in view.

<select data-bind="selectize: {}">
    <option value="1">Val 1</option>
    <option value="2">Val 2</option>

2. Using values from observable array.

The dropdown is created with all objects from items observable array. The value of id or attribute set in optionsValue binding is set to item_id.

<select data-bind="selectize: items, value: item_id"></select>

3. Getting selected item as an object

The selectize binding provides optional object parameter. While the observable provided with value parameter (like item_id in our example) holds the id (or whatever property optionsValue defines), the observable provided with object parameter holds the whole item itself.

<select data-bind="selectize: items, value: my_item_id, object: my_item"></select>

4. Using with multiselect

<select data-bind="selectize: items, value: selected_items" multiple></select>

5. Passing additional options

See official Selectize.js usage documentation for all available options.

<select data-bind="selectize: items, value: selected_items2, options: {plugins: ['remove_button']}"