Javascript 将值加载到Selectize.js

问题

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

使用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);
            }
        });
    }
});

---

我该怎么办？我需要以特定的方式形成文本框的值，还是需要使用一些javascript加载现有值？

我最终使用

onInitialize

回调加载存储在

数据-*

字段中的JSON值。你可以在行动中看到它

我的解决方案假定我的JSON对象的格式正确，并且它是单个对象或对象数组，因此它可能适合也可能不适合其他人的需要

因此它分析：

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

致：

---

当然，基于我在上面的原始帖子中的selectize设置。

多亏了你的回答，基于你的onInitialize（）方法，我最终得到了一个类似的解决方案。在我的例子中，我只需要转换一个值，因此我能够将id和标签作为数据属性存储在输入字段中

<input type="text" data-actual-value="1213" data-init-label="Label for 1213 item">

根据这些选项：

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

---

我知道这并不能回答您的问题，但我想与大家分享一下，以防这对其他人有所帮助。

新版本的selectize using items属性更简单。基本上，要设置所选项目，您需要先在选项中设置它。但是，如果您像我一样使用远程数据，则选项为空，因此需要将其添加到这两个位置

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

---

这对我很有用，我花了一段时间才弄明白。。。因此，作为一个更新，我创建了一个JSFIDLE，可以用来测试预加载/行为。对于远程数据，您总是必须这样做吗？我想知道这是否是我的问题，如果你有时间检查一下，也许你可以看到我做错了什么。JSFIDLE在2014年使用的CDN不再响应。我再次编辑了一个指向工作JSFIDLE的链接。

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]);
    }
}

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

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

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