Selectize.js: setValue dismisses items not in available options, despite create on (jsfiddle inside)

[thbar]

I've been almost caught offguard by this, so reporting it: when calling setValue with items that are not already in the available options, they will be silently dismissed.

See my jsfiddle.

Since I had the "create" option set to allow the user to create new tags, I assumed that this would not be the case, for some reason.

Not sure what to do here, raise an error or add the new items! But reporting still.

Great library otherwise, keep up the good work!

[joelmora]

I have the same issue!

[lichunqiang]

Where is you .....................

I'm crazy

[chipx86]

I spent some time looking into this today.

My scenario was this: I wanted to dynamically load a set of official entries for auto-completion (registered tags, in my case). These were loaded in response to another action on the page.

After loading the new ones, I needed to call setValue() with the previously-stored value to restore the options, but like you, any items in this value that weren't part of the options were being dropped.

My selectize setup looked like:

$el.selectize({
    create: true,
    delimiter: ',',
    persist: false
});

Initially, I had options set to the list of registered tag options. Later, I switched it to use selectize.addOption() in order to dynamically add the computed list of tag options.

Here's the solution I ended up with:

1. If you need to register options dynamically, do _not_ use addOption(). Instead, use registerOption(). This will perform the equivalent of setting options when initializing selectize, as opposed to addOption(), which is the equivalent of something you typed turning into an option when using create: true.
2. Take your value and turn it into an array of items, if you haven't already. For each item, call addOption() with the item in the proper form.
3. Call setValue() with your items.

This looks like (in my case):

var selectize = el.selectize,
    newOptions = [...],
    items = selectize.getValue().split(','),
    i;

/* Rebuild the list of options. */
selectize.clearOptions();

for (i = 0; i < newOptions.length; i++) {
    selectize.registerOption(newOptions[i]);
}

/*
 * Register any options found in the items list.
 *
 * Note that you need to set the option data to be in the same format as above.
 */
for (i = 0; i < items.length; i++) {
    selectize.addOption({
        text: items[i]
    });
}

/* Set the values, now that we have all the options registered. */
selectize.setValue(items);

Now we have a persistent set of items (the ones from registerOption()), and a set of custom items (from addOption()). The two combined will satisfy the items you want to set. Assuming you have persist: false set for selectize, deleting any custom items from the field will prevent them from being shown again in the list, whereas deleting any items from registerOption() will return those items to the list to be chosen again.

Hope that helps.

[Emerson]

Got caught on this as well – seems very counter intuitive

[apollodatasolutions]

Here is how we solved the issue. Works quite well once you know what to do.

http://jsfiddle.net/dchvatik/tjckrh6r/

[mattbrunetti]

If anyone is looking at solutions here, and wants the items to not remain in the pool of options once removed:

    onDelete: function (values) {
        values.forEach(function(value){
            self.selectize.removeOption(value);
        });
    }

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.