Alex.Ritna Alex.Ritna - 1 year ago 525
Javascript Question

Loading values into Selectize.js


I have a text input that I have selectized as tags which works fine for querying remote data, I can search and even create new items using it and that all works OK.

Using selectize:

var $select = $('.authorsearch').selectize({
valueField: 'AuthorId',
labelField: 'AuthorName',
searchField: ['AuthorName'],
maxOptions: 10,
create: function (input, callback) {
url: '/Author/AjaxCreate',
data: { 'AuthorName': input },
type: 'POST',
dataType: 'json',
success: function (response) {
return callback(response);
render: {
option: function (item, escape) {
return '<div>' + escape(item.AuthorName) + '</div>';
load: function (query, callback) {
if (!query.length) return callback();
url: '/Author/SearchAuthorsByName/' + query,
type: 'POST',
dataType: 'json',
data: {
maxresults: 10
error: function () {
success: function (res) {

The text box:

<input class="authorsearch" id="Authors" name="Authors" type="text" value="" />


Authors working

Then when I select one (in this case 'apple') it comes up in a badge as you'd expect, and the underlying value of the textbox is a comma separated list of the values of these items.

Author with badge

Current Output

The problem is when I load a page and want values retrieved from the database to be displayed in the selectized text input as tags, it only loads the values and I can see no way of displaying the displayname instead.

<input class="authorsearch" id="Authors" name="Authors" type="text" value="1,3,4" />

Numbers only

Desired Ouput

I have tried all sorts of values for the inputs value field to have it load the items as showing their displayname and not their values. Below is an example of a single object being returned as JSON, being able to load a JSON array of these as selectized tags would be ideal.

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

enter image description here

How can I go about this? Do I need to form the value of the text box a particular way, or do I need to load my existing values using some javascript?

Answer Source

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="" 

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( existingOptions ) === "[object Array]") {
        existingOptions.forEach( function (existingOption) {
    else if (typeof existingOptions === 'object') {

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:



enter image description here

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download