Getting the Underlying Input Element of a Selectize.js element from one of its event handlers

1
votes

This turned out to be a far more difficult task to determine on my own than I originally expected, but hopefully I'm just missing something.

I'm using Selectize.js for population of some fields within a form. The field sets are always the same (one text element initialized with .selectize(), and two other text elements with similar Ids. The selectize drop-down is populated via remote API calls and when an item is selected I have other fields auto-populated via selectize's onChange event.

The problem is that I want to retrieve a data attribute from the original textboxes that each selectize is initialized from inside the onChange handler to determine what additional fields should be populated. I cannot determine where to get the original element from because there is nothing in the API discussing this, and when debugging I cannot locate the actual element either.

Does anyone know how to get access to the underlying input element?

1
javascriptselectize.js

1 Answers

2
votes

After some more digging using developer tools it turns out you can get the underlying input element with this from inside an event handler:

this.$input

Where $input is a jQuery object of the underlying element. Unfortunately, this is not in the documentation.

Usage:

$('.lookup').selectize({
    onChange: function(value) {
        var data = this.$input.data('stuff');
    }
 });