Selectize.js

API

Examples of how to interact with the control programmatically.

var $select = $('#select-tools').selectize({
    maxItems: null,
    valueField: 'id',
    labelField: 'title',
    searchField: 'title',
    options: [
        {id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
        {id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
        {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
    ],
    create: false
});

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

var control = $select[0].selectize;

$('#button-clear').on('click', function() {
    control.clear();
});

$('#button-clearoptions').on('click', function() {
    control.clearOptions();
});

$('#button-addoption').on('click', function() {
    control.addOption({
        id: 4,
        title: 'Something New',
        url: 'http://google.com'
    });
});

$('#button-additem').on('click', function() {
    control.addItem(2);
});

$('#button-maxitems2').on('click', function() {
    control.setMaxItems(2);
});

$('#button-maxitems100').on('click', function() {
    control.setMaxItems(100);
});

$('#button-setvalue').on('click', function() {
    control.setValue([2, 3]);
});