Selectize Documentation

Installation & Usage

All pre-built files needed to use Selectize can be found in the dist folder.
If you're looking to get started with minimal fuss, include standalone/selectize.min.js (bundles Sifter and Microplugin dependencies).
Selectize is available at cdnjs.

        
          <script type="text/javascript" src="selectize.js"></script>
          <link rel="stylesheet" type="text/css" href="selectize.css" />
          <script>
            $(function () {
              $("select").selectize(options);
            });
          </script>
        
      

Glossary

Config / configuration

the initial settings of Selectize, given at initialization.

Settings

the current settings of Selectize, might be updated. Accessible with the setting property of the Selectize object.

Options

the list of objects to display. Each object must have a property with an unique value to identify the option; the property name is defined by the valueField setting. Option objects must also have a property with the label to display (as tag, in the drop down, etc.); the property name is defined by the labelField setting. The options can have other properties, ignored, unless referenced by other settings, like sortField or searchField.

items

the list of selected options. Or more exactly, the list of the values of the selected options.

Configuration

API

Properties

Methods

Events

Related Objects

Plugins

Via the microplugin interface, features can be added to Selectize without modifying the main library. This is great because it protects against code bloat, allows for lean builds, and allows for addons to be sanely isolated. The plugin system isn't meant to be sexy; it's lean, makes very few assumptions, and gives the developer complete control.

Example Plugins

A few notes:

• All plugins live in their own folders in "src/plugins".
• Plugin names should be in follow the format: /[a-z_]+$
• JS source should live in a "plugin.js" file (required).
• CSS should live in a "plugin.less" file (optional). It will be bundled at build time.
• Plugins are initialized right before the control is setup. This means that if you want to listen for events on any of the control's elements, you should override the setup() method.

Boilerplate

Selectize.define('plugin_name', function(options) {
        // options: plugin-specific options
        // this: Selectize instance
        });

Adding dependencies

Selectize.define('plugin_name', function(options) {
        this.require('another_plugin');
        });

Configuration

Methods should be extended by wrapping them:

var self = this;
    this.someMethod = (function() {
      var original = self.someMethod;
      return function() {
        // do your logic
        return original.apply(this, arguments);
      };
    })();

DOM Events

Because all elements for the control are created within the setup() method (which is invoked after the plugin initialized) events should be added by overriding the setup method, like so:

Selectize.define('plugin_name', function(options) {
      var self = this;

      // override the setup method to add an extra `click`  handler
      this.setup = (function() {
        var original = self.setup;
        return function() {
          original.apply(this, arguments);
          this.$control.on('click', 'div', function(e) {
            alert('A div was clicked!');
          });
        };
      })();


    

Plugin Usage

For a more detailed description of plugin option formats and how the plugin system works, check out the microplugin documentation.

List (without options)

$('select').selectize({
      plugins: ['plugin_a', 'plugin_b']
    });

List (with options)

$('select').selectize({
      plugins: {
        'plugin_a': { /* ... */ },
        'plugin_b': { /* ... */ }
      }