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

Question

I was wondering, how could I get the value of the currently selected item in my Selectize.js input? I have checked the documentation and scoured everything selectize.js related on Stackoverflow but found nothing in the way of an example I could go off of. Any ideas? Here is what I figured would work based on the documentation, but instead gave me Undefined is not a function error.

Please note the very bottom of the code, where I use the select.on('change'; this (in addition to other API methods) is what I have tried. The on change works perfectly, but unfortunately nothing else has.

var select = $('#searchTextbox').selectize({           maxItems: 1, //Max items selectable in the textbox           maxOptions: 30, //Max options to render at once in the dropdown           searchField: ['text'], //Fields the autocomplete can search through.  Example of another searchable field could be 'value'           openOnFocus: true,           highlight: true,           scrollDuration: 60, //currently does nothing; should say how many MS the dropdown and drop up animations take           create: false, //Whether or not the user is allowed to create fields           selectOnTab: true,           render: {               option: function(data, escape) {                   var valueArray = [];                            valueArray[0] = data.value.split(",");                   var color = valueArray[0][0] == "1" ? "green" : "red";                    return '<div class="option" style="color: '                        + color                        + ';">'                        + escape(data.text)                        + '</div>';               },               item: function(data, escape) {                   var valueArray = [];                            valueArray[0] = data.value.split(",");                   var color = valueArray[0][0] == "1" ? "green" : "red";                    return '<div class="option" style="color: '                        + color                        + ';">'                        + escape(data.text)                        + '</div>';               }                 }       });  select.on('change', function() {       var test = select.getItem(0);       alert(test.val()); }); 

Answer 1

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.

Answer 2

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.