javascript - 将值加载到 Selectize.js 中

Question

问题

我有一个文本输入，我选择它作为标签，它可以很好地查询远程数据，我可以使用它搜索甚至创建新项目，并且一切正常。

使用选择:

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”)时，它会如您所期望地出现在徽章中，并且文本框的基础值是这些项目的值的逗号分隔列表。

电流输出

问题是，当我加载页面并希望从数据库检索到的值作为标签显示在选定的文本输入中时，它只加载值，而我看不到显示显示名称的方法。

<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 加载现有值？

Answer 1

感谢您的回答并根据您的 onInitialize() 方法，我最终得到了类似的解决方案。就我而言，我只需要转换一个值，因此我能够将 id 和标签作为数据属性存储在输入字段中。

<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: ....
});

我知道这不能回答您的问题，但我想分享一下，以防万一这可以帮助别人。