Loading values into Selectize.js

Even simpler on new version of selectize using items attribute. Basically to set a selected item you need to have it first in the options. But if you use remote data like me, the options are empty so you need to add it to both places.

$('select').selectize({
        valueField: 'id',
        labelField: 'name',
        options:[{id:'123',name:'hello'}],
        items: ['123'],
        ...

This is working for me and took me a while to figure it out... so just sharing

Thanks to your answer and based on your onInitialize() approach I ended up with a similar solution. In my case I just needed to translate one value, thus I was able to store the id and label as data attributes in the input field.

<input type="text" data-actual-value="1213" data-init-label="Label for 1213 item">

Then on initialization:

onInitialize: function() {
        var actualValue = this.$input.data('actual-value');
        if (actualValue){
            this.addOption({id: actualValue, value: this.$input.data('init-label')});
            this.setValue(actualValue);
            this.blur();
        }
    }

According to these options:

$('input').selectize({
    valueField: 'id',
    labelField: 'value',
    searchField: 'value',
    create: false,
    maxItems: 1,
    preload: true,
    // I had to initialize options in order to addOption to work properly 
    // although I'm loading the data remotely
    options: [],
    load: ... ,
    render: ...,
    onInitialize: ....
});

I know this does not answer your question but wanted to share just in case this could help someone.

I ended up using the onInitialize callback to load the JSON values stored in a data-* field. You can see it in action here in this jsfiddle.

<input class="authorsearch" id="Authors" name="Authors" type="text" value="" 
 data-selectize-value='[{"AuthorId":1,"AuthorName":"Test"},{"AuthorId":2,"AuthorName":"Test2"}]'/>

Basically it parses the data-selectize-value value and then adds the option(s) to the selectize then adds the items themselves.

onInitialize: function() {
    var existingOptions = JSON.parse(this.$input.attr('data-selectize-value'));
    var self = this;
    if(Object.prototype.toString.call( existingOptions ) === "[object Array]") {
        existingOptions.forEach( function (existingOption) {
            self.addOption(existingOption);
            self.addItem(existingOption[self.settings.valueField]);
        });
    }
    else if (typeof existingOptions === 'object') {
        self.addOption(existingOptions);
        self.addItem(existingOptions[self.settings.valueField]);
    }
}

My solution does presume my JSON object is formed correctly, and that it's either a single object or an object Array, so it may or may not be appropriate for someone elses needs.

So it parses:

[{"AuthorId":1,"AuthorName":"Test"},
 {"AuthorId":2,"AuthorName":"Test2"}]

To:

Based of course on my selectize settings in my original post above.