Alex.Ritna Alex.Ritna - 4 months ago 26
Javascript Question

Loading values into Selectize.js

Problem

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) {
$.ajax({
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();
$.ajax({
url: '/Author/SearchAuthorsByName/' + query,
type: 'POST',
dataType: 'json',
data: {
maxresults: 10
},
error: function () {
callback();
},
success: function (res) {
callback(res);
}
});
}
});


The text box:

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


Examples:

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":3,"AuthorName":"Apple"},
{"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

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:

enter image description here

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

Comments