JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.default.css">
<script src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<input class="authorsearch" id="Authors" name="Authors" type="text" value="" data-selectize-value='[{"AuthorId":1,"AuthorName":"Test"},{"AuthorId":2,"AuthorName":"Test2"}]'/>
JavaScript
$('.authorsearch').selectize({
valueField: 'AuthorId',
labelField: 'AuthorName',
searchField: ['AuthorName'],
maxOptions: 10,
create: function (input, callback) {
return {"AuthorId":input + 'value',"AuthorName":input};
},
render: {
option: function (item, escape) {
return '<div>' + escape(item.AuthorName) + '</div>';
}
},
load: function (query, callback) {
if (!query.length) return callback();
return callback();
},
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]);
}
}
});
/* Taken from http://brianreavis.github.io/selectize.js/ to display current value */
$(function() {
$('select.selectized,input.selectized').each(function() {
var $container = $('<div>').addClass('value').html('Current Value: ');
var $value = $('<span>').appendTo($container);
var $input = $(this);
var update = function(e) { $value.text(JSON.stringify($input.val())); }
$(this).on('change', update);
update();
$container.insertAfter($input.next());
});
});