Select2 4.0.0无法选择结果

Question

我正在尝试使用最新版本的Select2查询我的网站的API并返回多选。它正在获取正确的数据，它甚至正确格式化下拉列表，将返回对象中的两个键组合为“（A-123）John Johnson”，但下拉列表没有响应鼠标悬停或点击。

我正在使用select2.full.min.js和select2.min.css文件。出于项目的目的，我将它们包含在目录中并通过cshtml中的Bundles访问它们，而不是通过CDN访问它们。

HTML：

<div>
    <select class="user-list" multiple="multiple" style="width: 100%">
    </select>
</div>

此刻，它看起来像这样，这就是我想要的：

不确定这是否相关，但是当我在搜索时浏览生成的源代码时，输​​入看起来很好，但是下拉列表的代码显示为灰色，就像它被隐藏一样。

我在这里和其他地方找到的其他建议，我尝试了一些不同的解决方案。我最终发现了templateResult和templateSelection应该如何工作（不是特别感谢文档），并尝试返回ID，但我仍然无法实际选择任何东西，甚至在我悬停时得到响应选项。

这是我最后的内容，包括一些调试以确保返回的对象有效。

JS：

        // Setup autocomplete/select for User filter
        $(".user-list").select2({
            ajax: {
                url: "[api url]",
                type: "GET",
                dataType: "json",
                data: function (params) {
                    return {
                        search: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data) {
                    console.log(JSON.stringify(data));
                    return {
                        results: data
                    };
                },
            },
            escapeMarkup: function (markup) { return markup; },
            id: function (data) { return data.Id.toString(); },
            minimumInputLength: 1,
            templateResult: function (data, page) {
                return "(" + data.User + ") " + data.Name;
            },
            templateSelection: function (data, page) {
                return "(" + data.User + ") " + data.Name;
            }
        })

ID是一个GUID，还有另外两个字段，我称之为名称和用户。

数据样本：

[
    {
        "Id":"a1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1",
        "Name":"John Johnson",
        "User":"A-123"
    },
    {
        "Id":"b2b2b2b2-b2b2-b2b2-b2b2-b2b2b2b2b2b2",
        "Name":"Tom Thompson",
        "User":"B-456"
    }
]

我讨厌添加一堆似乎与此相关的问题，但我发现的大多数结果都是针对旧版本的选项有明显不同，而且它们还没有为我工作。

Answer 1

select2操作的方式是它使用每个数据对象的“id”值，并将它们作为选定的选项放入原始的Select元素中。这是区分大小写的。

默认情况下，它按数据对象的“text”值显示下拉选项和所选元素。这不允许自定义格式化。

如果（像我一样）你想要返回不同的数据选项，你仍然需要返回一个字段作为“id”，或者在ajax下的processResults选项中返回的对象中将字段重新映射到“id”。然后将templateResult和templateSelection设置与其他返回的数据一起使用，以显示您想要的内容。

如果您返回并正确解析除id之外的所有内容，您可能会使用其他功能列表，但无法选择任何选项。

对于我的项目，下拉列表的要求发生了一些变化，但这是我结束的地方。它可以很好地添加multiple =“multiple”属性，使其成为多选。

<select class="select2" style="width:100%; height: 100%;">
    <option></option>
</select>

$(".select2").select2({
    ajax: {
        url: "[api url]",
        method: "get",
        data: function (params) {
            return {
                search: params.term
            };
        },
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    placeholder: "Enter a User ID or Name",
    templateResult: function(data) {
            return "(" + data.user + ") " + data.name;
    },
    templateSelection: function(data) {
        return "(" + data.user + ") " + data.name;
    }
}).ready(function () {
    $(".select2-selection__placeholder").text("Enter a User ID or Name")
})

我的初始问题的一部分可能是为旧版本的Select2实现修复的所有尝试，它们有一组完全不同的选项/设置。

此外，还有一点注意事项，“占位符”属性目前不适用于自定义模板。它尝试将占位符文本强制为Result格式，使用此代码显示“（undefined）undefined”。要修复它，需要一个空选项并替换select2.ready。

上的文本

Answer 2

我遇到了同样的问题。解： 添加了这部分：

_.each(data.ResultObject, function (item) { item.id = item.K_CONTACT; });

（使用下划线）

for init

$(".js-data-example-ajax").select2({
    ajax: {
        url: "api/MyApi/MyApi",
        method: "POST",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                SearchPart: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, params) {

            params.page = params.page || 1;
            _.each(data.ResultObject, function (item) { item.id = item.K_CONTACT; });

            return {
                results: data.ResultObject,
                pagination: {
                    more: (params.page * 30) < data.total_count
                }
            };
        },
        cache: true
    },
    multiple: true,
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 3,
    tags: true,
    templateResult: self.Select2FormatData, // omitted for brevity, see the source of this page
    templateSelection: self.Select2FormatDataSelection // omitted for brevity, see the source of this page
});