将值加载到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')时,它会出现在您想要的徽章中,文本框的基础值是这些项的值的逗号分隔列表.

电流输出

问题是当我加载页面并希望从数据库中检索到的值作为标签显示在选择的文本输入中时,它只加载值而我看不到显示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加载现有值？

Answer 1

我最终使用onInitialize回调来加载存储在data-*字段中的JSON值.你可以在这个jsfiddle中看到它的实际效果.

<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对象是正确形成的,并且它是单个对象或对象数组,因此它可能适合或不适合某些人的需要.

所以它解析:

[{"AuthorId":1,"AuthorName":"Test"},
 {"AuthorId":2,"AuthorName":"Test2"}]

至:

基于我上面原始帖子中的选择设置.

Answer 2

感谢您的回答,并基于您的onInitialize()方法,我得到了类似的解决方案.在我的情况下,我只需要翻译一个值,因此我能够将id和label作为数据属性存储在输入字段中.

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

我知道这不能回答你的问题,但想分享以防万一这可以帮助别人.

Answer 3

在使用items属性进行选择的新版本上甚至更简单。基本上，要设置一个选定的项目，您首先需要在选项中有它。但是，如果像我一样使用远程数据，则这些选项为空，因此需要将其添加到两个地方。

$('select').selectize({
        valueField: 'id',
        labelField: 'name',
        options:[{id:'123',name:'hello'}],
        items: ['123'],
        ...

这对我来说很有效，花了我一段时间才弄清楚...所以只是分享