将值加载到Selectize.js中？
将值加载到Selectize.js中？
提问于 2018-05-15 00:48:43
问题
我有一个文本输入，我选择了用于查询远程数据的标签，我可以使用它搜索甚至创建新项目，并且所有工作都正常。
使用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);
}
});
}
});
文本框：
<input class="authorsearch" id="Authors" name="Authors" type="text" value="" />
例子：
作者在工作
然后，当我选择一个（在这种情况下，'apple'），它会出现在你想象中的徽章中，并且文本框的基础值是用逗号分隔的这些项目的值列表。
带有徽章的作者
当前输出
问题是当我加载一个页面，并希望从数据库中检索到的值作为标签显示在选择的文本输入中时，它只加载这些值，而我看不到显示displayname的方式。
<input class="authorsearch" id="Authors" name="Authors" type="text" value="1,3,4" />
仅限数字
期望的输出
我已经尝试了输入值字段的各种值，以使其加载显示它们的显示名称而不是它们的值的项目。下面是一个以JSON形式返回的单个对象的例子，能够加载这些JSON数组作为选择标签是理想的。
[{"AuthorId":1,"AuthorName":"Test Author"},
{"AuthorId":3,"AuthorName":"Apple"},
{"AuthorId":4,"AuthorName":"Test Author 2"}]
在这里输入图像描述
我怎么去解决这个问题？我是否需要以特定方式形成文本框的值，还是需要使用一些JavaScript加载我现有的值？
回答 2
Stack Overflow用户
发布于 2018-05-15 09:08:09
我结束了使用onInitialize回调来加载存储在data-*字段中的JSON值。
<input class="authorsearch" id="Authors" name="Authors" type="text" value=""
data-selectize-value='[{"AuthorId":1,"AuthorName":"Test"},{"AuthorId":2,"AuthorName":"Test2"}]'/>
基本上，它分析data-selectize-value值，然后将选项添加到选择，然后自己添加项目。
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]);
}
}
我的解决方案确实假设我的JSON对象形成正确，并且它是单个对象或对象Array，因此它可能适用于或不适合某人需求。
所以它解析：
[{"AuthorId":1,"AuthorName":"Test"},
{"AuthorId":2,"AuthorName":"Test2"}]
至：
在这里输入图像描述
Stack Overflow用户
发布于 2018-05-15 09:59:42
<input type="text" data-actual-value="1213" data-init-label="Label for 1213 item">然后在初始化时：
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();
}
}根据这些备选办法：
$('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: ....
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008469
复制相关文章
相似问题
腾讯云开发者
