Trigger selectize load method programmatically

Question

Again simple question on selectize.js.

I have an independent user interface element (let's refer to it as input A) and a selectize element. Selectize element is defined as follows:

var test = $('#my_selectize').selectize({
    // ....
    load: function(query, callback) {
            $.ajax({
                url: '/remote_url/',
                type: 'GET',
                data: {q: query},
                error: function() { callback(); },
                success: function(res) {
                    callback(JSON.parse(res.f));
                }
            });
        }
    })[0].selectize;

Now, I want the load method to be triggered everytime the user edits input A. To do this, I tried the following according to the doc:

$('#input_A').on('change', function(){
        test.trigger('load');}

And nothing happens. Any ideas? Is it possible whatsoever ?

Answer 1

 $("#inputA").change(function (e) {
         test.onSearchChange($(this).val()); //test = $('#my_selectize')[0].selectize;
 });

There is a method (onSearchChange) which triggers the "load" event in Selectize source code. We can use this method to trigger load method manually at code behind.

Answer 2

Here is my solution. I hope it helps someone.

const selectize = elem.selectize({
  //...
  onLoad: () => {
    //if you need to refresh list after changes
    elem[0].selectize.refreshOptions();
  }
});
    
otherElem.change(() => {
  const { selectize } = elem[0];
  const value = elem.find("input").val(); //here I just get selectize input value
    
  delete selectizeElem.loadedSearches[value];
  selectize.onSearchChange(value);
});