Closed
Description
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!!!