Selectize.js: How to dynamically update options on type

[caseymct]

We are using selectize to allow a user to add hashtags to a post. When the widget is initialized, I make a request to the server that populates the dropdown with trending hashtags. Then, as the user types, I would like to update the options to show tags that match their search. e.g. (this is used in Ember)

let s = input.selectize({
   searchField: ['name'],
   preload: true,
   options: [],
   create: function(input, callback) {
   },
   render: {
      option: function (item, escape) {
         return '<div>' + escape(item.text) + '</div>';
      }
   },
   load: (query, callback) => {
     if (!query.length) {
        return this.initializeFromTrendingTags().then((options) =>  {
           // returns an array of options [{ text: ..., value: ... }, ...]
           callback(options);
        });
     }
     // searchTags also returns an array of matched options in format [{ text: ..., value: ... }, ...]
     return this.searchTags(query).then((options) => {
        callback(options);
     });
  }
})

Where searchTags issues the api request and updates the options.
However, no matter what I do I can't seem to get the options to update. Ideally I'd like the dropdown to change while open to the matched tags. I've tried doing the following:

selectize.clearCache('option');
selectize.clearOptions();
selectize.addOption(options);
selectize.refreshOptions(true);

but this just clears out the options altogether. I'm stuck. any help?
thanks!!!

[andrey-lizunov]

+1
I think current behavior of clearOptions method is not right. Not sure what is the best way to deal with it, but it looks like we should filter current options by list of already selected options.

[andrey-lizunov]

Check my PR pls. Not sure is it good solution, but it works fine.

[Cr1stal]

+1

[pashpashkin]

👍

[Sergey-B]

:+1:

[donbobka]

👍

[apollodatasolutions]

@caseymct, not sure if you still have this issue, but I just ran into something similar - it was caused by our searchField not matching up with the field data in the returned JSON.

[akshayvasishth]

@andrey-lizunov I also need the same behavior. If the user types a new name, the options list should refresh but the already selected items should not vanish. Is there anyway i can get this feature ?

[andrey-lizunov]

@raphale you can try to add a code from my PR in souce code of selectize in your project or if it's not convenient, you can manualy do this in onType callback which you can describe in code for dropdown initialization.
For example, first time I wrote this code in my project. It's CoffeeScript with Underscore lib.
So it's some kind of calling clearOptions, but with custom behavior in onType callback. I don't think that this way is good, but it works.

  onType: ->
    unless $.isEmptyObject(self.$input[0].selectize.sifter.items)
      self.$input[0].selectize.loadedSearches = {}
      self.$input[0].selectize.userOptions = {}
      self.$input[0].selectize.renderCache = {}
      options = _.pick(self.$input[0].selectize.sifter.items, (val, key) ->
        _.indexOf(self.$input.val().split(','), key.toString()) != -1;
      )
      self.$input[0].selectize.options = options
      self.$input[0].selectize.sifter.items = options
      self.$input[0].selectize.lastQuery = null

This part depends on your code in render option.

  _.indexOf(self.$input.val().split(','), key.toString()) != -1;

I hope I'm not wrong, this is old code and I didn't check it))

[akshayvasishth]

@andrey-lizunov Thanks a lot for the reply. I tried using it in the on type event handler but it caused errors relating to fs module in requirejs. Moreover, for this, i have to include a lot of libraries in my code, which I wouldn't prefer doing, as i am not using them right now.Could you please provide a version of this library which contains this workaround. Could the contributors work on this, as this would be a very useful addition to the library?

[andrey-lizunov]

@raphale Sorry, not sure that I understand you.
In this PR https://github.com/selectize/selectize.js/pull/1080 you can find the idea of the workaround. This code uses clear js without any libraries. You can apply same idea in onType callback.
I made this PR for rails-assets-selectize (0.12.1) and it worked for this version.

Could the contributors work on this, as this would be a very useful addition to the library?

I'm not a contributor, just simple user of this library who faced this problem.

Could you please provide a version of this library which contains this workaround.

You can make a fork from any version, for example 0.12.1 and merge this PR into this fork. Or for example you can use this fork https://github.com/andrey-lizunov/selectize.js