How to get the value of the currently selected Selectize.js input item

Found the problem!

For anyone using selectize.js and having problems with the API, try this!

If you look at the part of the code where I initialized the selectize.js dropdown, I store the instance in my 'select' variable and that's it. However, this isn't the proper way to do things (from what I've seen at least). You need to do the following, rather than simply just storing the instance in a variable.

var $select = $("#yourSelector").selectize({
    //options here
});

var selectizeControl = $select[0].selectize

After you do this, you can use the API properly. Without doing it this way, I was getting an Undefined is not a function error.

Finally, to answer my own question, I was able to retrieve the current value of the selectize input by using the following code (the .on('change') and alert are obviously not necessary):

selectizeControl.on('change', function() {
      var test = selectize.getValue();
      alert(test);
});

Why it's necessary to do it this way I'm not exactly sure. Perhaps someone could enlighten me and any future viewers as to why this way works and my previous method didn't.

I hope this helps someone else out in the future. Feel free to edit and make any changes.

In my testings, selectize imediatelly updates the value of the <select> it 'replaced' (actually it only hides the <select> using display: none).

So if you don't want to use callbacks neither global variables, it's as simple as:

$('#id_of_the_select_element_you_called_selectize_on').val().

Rather than attaching the event later, you can do it in the initialization:

var select = $('#searchTextbox').selectize({
          maxItems: 1, //Max items selectable in the textbox
          maxOptions: 30, //Max options to render at once in the dropdown
          ...
          onChange: function(value) {
               alert(value);
          }
      });

Check out the docs for more callbacks.