select2 4.0 AJAX预填如何实现？

Question

我已经阅读了 这篇文章，这篇文章 和 这篇文章，并根据文档最重要的一点，但是它们都对我无效。

我试图使用 AJAX select2。我试图创建一个通用的 "select" 项。

因此，对于所有具有 data-select2-json 属性的元素，我应用了一个带有在 data-select2-json 值中的 ajax URL 的 select2。

$('[data-select2-json!=""][data-select2-json]').each(function() {
    var url = $(this).attr('data-select2-json');
    var pg_size = $(this).attr('data-select2-page-size') | 30;
    $(this).select2({
        language: language_code,
        tokenSeparators: [',', ' '],
        ajax: {
            url: url,
            dataType: 'json',
            delay: 300,
            data: function (params) {
                return {
                    q: params.term, // -> q=[search term]
                    page: params.page // -> page=[no page]
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                console.log(data.items);
                return {
                    results: data.items,
                    pagination: {
                      more: (params.page * pg_size) < data.total
                    }
                };
            },
            cache: true
        },
        // let our custom formatter work
        escapeMarkup: function (markup) { return markup; },
        minimumInputLength: 1,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
    });
});

它工作得很好！

服务器发送的JSON始终格式化如下：

{"items":
    [{"item": "Fran\u00e7ais", "id": 1},
     {"item": "Finlandais", "id": 5},
     {"item": "Chinois simplifi\u00e9", "id": 15}
    ],
"total": 3}

这与您在文档中找到的AJAX示例非常接近。我的问题是AJAX初始化：我想要将值添加到HTML中：

<select multiple="multiple" class="form-control"
        data-select2-json="/fr/chez-moi/tags/langues"
        multiple="multiple"
        name="known_languages">
    <option value="1" selected="selected">Français</option>
    <option value="2" selected="selected">Chinois simplifié</option>
</select>

然后使用select2进行初始化（即上面的代码 $(this).select2({..），但这并不起作用，使我得到空值：

NB： Kevin Brown在此给出的解决方案 也无法解决问题，并给出完全相同的结果。

另一个解决方案是通过AJAX向带有类似于“&init=1 ”这样的参数的URL请求，因此服务器将发送添加了参数（例如每个值的checked:true）的结果，然后我将使用这些值调用select2。

文档中对如何预填充select2没有明确说明。我该怎么办？

这是我的其他函数：

function item_or_text(obj) {
    if (typeof(obj.item)!='undefined') {
        return (obj.item.length ? obj.item : obj.text);
    }
    return obj.text;
}

function formatRepo(data) {
    if (data.loading) return data.text;
    var markup = item_or_text(data);
    console.log('formatRepo', data, markup);
    return markup;
}

function formatRepoSelection(item) {
    var retour = item_or_text(item);
    console.log('formatRepoSelection', item, item.item, retour);
    return retour;
}

- Olivier Pons

---

我的回答对你没用吗？请提供反馈。 - Fraser Crosbie

Answer 1

我在jsfiddle上创建了一个工作示例，使用了Select2 Examples页面提供的示例代码。我只需要将他们的示例选择标签更改为像你的一样接受多个。

<select multiple="multiple" ...

我还添加了第二个默认选中的选项：

<option value="3620194" selected="selected">select2/select2</option>
<option value="317757" selected="selected">Modernizr/Modernizr</option>

如果您查看这个fiddle，您会看到它是如何按照您的要求工作的。

您没有包含templateSelection: formatRepoSelection方法的代码。我猜测这个方法是问题的原因。在示例页面上使用的代码是：

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

虽然我不知道你的formatRepoSelection代码是什么，但我认为如果你将其更改为以下内容，你的问题将得到解决：

function formatRepoSelection(repo) {
  return repo.item;
}

- Fraser Crosbie

---

我确认你的答案是有效的，因为你的答案肯定是可行的。我醒来4个小时后，尝试了我的代码，一切都正常：我真的不知道为什么。没有改动任何东西！我正在按照你的建议添加选项和已选择的选项。也许每天工作14个小时，连续10天有点太多了...非常感谢你的回答。 - Olivier Pons

Answer 2

我是这样解决的： 在对选择元素执行select2()之前，获取它的初始值：

var initval = selector.attr("value");

将其转换为select2后，使用initval创建一个选项：

if (initval) {
    var option = new Option(initval, initval, true, true);
    selector.append(option).trigger('change');
}

您可以对多值选择元素执行类似的操作。

- Σωτήρης Τσακιρίδης