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:
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.
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 />
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}]
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?
