Selectize.js events - wont work

Question

I need some help with selectize.js events - they dont work...

Inicialize selectize.js:

$("input[name='addTask[users]']").selectize({

    valueField: 'email',
    labelField: 'name',

    //... more options like render... 

});

And setting event:

$("input[name='addTask[users]']").selectize().on('type', function(){
    alert();
});

If I typing in input nothing happens...

EDIT: No errors in console, selector is good because plugin works perfectly.

Only one event is working for me - "change".

Here si documentation:https://github.com/brianreavis/selectize.js/blob/master/docs/events.md (Also I do not understand "params" - on what the needs are and what they do)

Any hints, ideas? Examlple it pleases me...

---

EDIT: OK I GOT IT!!! SO - SOLUTION:

---

In initialization selectize.js:

$("input[name='addTask[users]']").selectize({

    valueField: 'email',
    labelField: 'name',

    onType : eventHandler('onType'), // <----- this added

    //... more options like render... 

});

and BEFORE initialization:

var eventHandler = function(name) {
    return function() {
        alert(name + ' ' + arguments['0']);  // name of event + typed string
    };
};

And alert work if you start typing in input :)

Giffy

What troubleshooting have you done? Have you looked in the browser console for errors? – Loudmouthed

Answer 1

Your issue is in this line:

$("input[name='addTask[users]']").selectize().on('type', function(){
    alert();
});

You should have done:

$("input[name='addTask[users]']")[0].selectize.on('type', function(){
    alert();
});

From the Docs: When initializing the control, the "selectize" property is added on the original / element—this property points to the underlying Selectize instance.

// initialize the selectize control
var $select = $('select').selectize(options);

// fetch the instance
var selectize = $select[0].selectize;

And Event Docs: Selectize instances have a basic event emitter interface that mimics jQuery, Backbone.js, et al:

var handler = function() { /* ... */ };
selectize.on('event_name', handler);
selectize.off('event_name');
selectize.off('event_name', handler);

Citify