Problem
我有一个文本输入,我选择它作为标签,它可以很好地查询远程数据,我可以使用它搜索甚至创建新项目,并且一切正常。
使用选择:
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="" />
例子:
然后,当我选择一个(在本例中为“苹果”)时,它会如您所期望地出现在徽章中,并且文本框的基础值是这些项目的值的逗号分隔列表。
电流输出
问题是,当我加载页面并希望从数据库检索到的值作为标签显示在选定的文本输入中时,它只加载值,而我看不到显示显示名称的方法。
<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 加载现有值?