ajax - 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 元素中。这是区分大小写的。

默认情况下，无论数据对象的“文本”值如何，它都会显示下拉选项和选定元素。这不允许自定义格式。

如果(像我一样)您想返回不同的数据选项，您仍然需要将字段作为“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 实现修复的所有尝试，它有一组完全不同的选项/设置可用。

此外，附带说明一下，“占位符”属性当前不适用于自定义模板。它尝试将占位符文本强制转换为结果格式，该格式显示“(未定义)未定义”与此代码。要修复它需要一个空选项并替换 select2.ready 上的文本。