将值加载到Selectize.js中 [英] Loading values into Selectize.js

问题描述

<强>问题

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

I have a text input that I have selectized as tags which works fine for querying remote data, I can search and even create new items using it and that all works OK.

使用选择:

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")时，它会出现在徽章中，如您所愿，文本框的基础值是这些值的逗号分隔列表.

Then when I select one (in this case 'apple') it comes up in a badge as you'd expect, and the underlying value of the textbox is a comma separated list of the values of these items.

当前输出

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

The problem is when I load a page and want values retrieved from the database to be displayed in the selectized text input as tags, it only loads the values and I can see no way of displaying the displayname instead.

<input class="authorsearch" id="Authors" name="Authors" type="text" value="1,3,4" />

所需的食物

我尝试了输入值字段的各种值，以使其加载项目以显示其显示名称而不是其值.下面是一个将单个对象作为JSON返回的示例，可以将其中的JSON数组作为选择的标签加载是理想的选择.

I have tried all sorts of values for the inputs value field to have it load the items as showing their displayname and not their values. Below is an example of a single object being returned as JSON, being able to load a JSON array of these as selectized tags would be ideal.

[{"AuthorId":1,"AuthorName":"Test Author"},
 {"AuthorId":3,"AuthorName":"Apple"},
 {"AuthorId":4,"AuthorName":"Test Author 2"}]

我该如何处理?我是否需要以特定方式形成文本框的值，还是需要使用一些JavaScript加载现有值?

How can I go about this? Do I need to form the value of the text box a particular way, or do I need to load my existing values using some javascript?

推荐答案

我最终使用onInitialize回调加载了存储在data-*字段中的JSON值.您可以在此jsfiddle中的此处看到它.

I ended up using the onInitialize callback to load the JSON values stored in a data-* field. You can see it in action here in this 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值，然后将选项添加到selectize中，然后添加项本身.

Basically it parses the data-selectize-value value and then adds the option(s) to the selectize then adds the items themselves.

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对象正确形成，并且它是单个对象还是对象数组，因此它可能适合也可能不适合其他人的需求.

My solution does presume my JSON object is formed correctly, and that it's either a single object or an object Array, so it may or may not be appropriate for someone elses needs.

因此它解析:

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

收件人:

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

Based of course on my selectize settings in my original post above.

这篇关于将值加载到Selectize.js中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！