Select2 4.0.0 不能 select 结果

Question

我正在尝试使用最新版本的 Select2 来查询我站点的 API 和 return 多个 select。它正在获取正确的数据，甚至正确地格式化下拉菜单，将 returned 对象中的两个键组合为“(A-123) John Johnson”，但下拉菜单没有响应鼠标悬停或点击。

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

HTML:

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

目前，它看起来像这样，这就是我想要的样子：

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

根据我在此处和其他地方找到的其他建议，我尝试了几种不同的解决方案。我最终发现了 templateResult 和 templateSelection 应该如何工作（不是特别感谢文档），并尝试 returning ID，但我似乎仍然无法 select 任何东西，甚至当我将鼠标悬停在选项上时得到响应。

这是我最后的结果，包括一些调试以确保 returned 对象有效。

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，还有另外两个字段，我称之为 Name 和 User。

数据样本：

[
    {
        "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" 值并将这些值作为 selected 选项放入原始 Select 元素中(s).这是区分大小写的。

默认情况下，它会根据数据对象的 "text" 值显示下拉选项和 selected 元素。这不允许自定义格式。

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

如果您 return 并正确解析除 id 之外的所有内容，您可能会得到一个其他功能列表，但无法 select 任何选项。

我的项目对下拉菜单的要求略有变化，但我最终还是选择了这里。添加到 multiple="multiple" 属性使其成为 multi-select 也能正常工作。

<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 实施修复的所有尝试，它有一组完全不同的 options/settings 可用。

此外，需要注意的一点是，"placeholder" 属性目前不适用于自定义模板。它试图将占位符文本强制转换为结果格式，该格式使用此代码显示“(undefined) undefined”。要修复它需要一个空选项并替换 select2.ready.

上的文本

Answer 2

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

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

（使用下划线）

我的初始化

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

Select2 4.0.0 不能 select 结果

Select2 4.0.0 can't select results

ajax

json

asp.net-mvc-4

jquery-select2-4