使用 AJAX 将基于 JSON 的远程数据导入 Select2答案

【问题标题】：Importing JSON based remote data to Select2 using AJAX使用 AJAX 将基于 JSON 的远程数据导入 Select2
【发布时间】：2017-06-01 06:06:07
【问题描述】：

目的是将数据从Controller 端导入Select2 元素（启用多选）。我希望设置看起来像 Stack Overflow 中的标签框，您可以在其中开始输入标签，选择它，然后再选择另一个。

我一直使用Select2 文档作为参考，但是请求没有发送到控制器。

Select2 Documentation

我的代码：

$(".jsData").select2({          
    ajax: {
        contentType: 'application/json',
        url: '<%=Url.Action("GetDataMethod","RelevantController")%>',
        type: 'POST',
        dataType: 'json',
        data: function (term) {
            return {
                sSearchTerm: term
            };
        },
        results: function (data) {
            var datajs = $.map(data, function (obj) {
                obj.text = obj.someterm; // desired field,
                obj.id = obj.someId;
                return obj;
            });
            return {
                results: JSON.parse("[" + datajs.split(",") + "]")
            };
        }
    },
    multiple: true         
});

我对动态地将数据引入 Select 2 比较陌生，因此我们将不胜感激任何帮助。谢谢！

【问题讨论】：

你在使用ASPX视图引擎吗？
是的，我使用的是 ASPX (C#) 视图引擎。

标签： javascript jquery ajax asp.net-mvc jquery-select2

【解决方案1】：

更新：找到了解决方案，在这里发布给其他人。

HTML

 <input class="jsData" style="width: 100%"  id="select2Data" ></input>

Javascript

              $(".jsData").select2({
                        ajax: {
                            minimumInputLength: 4,
                            contentType: 'application/json',
                            url: '<%=Url.Action("GetData","Controller")%>',
                            type: 'POST',
                            dataType: 'json',
                            data: function (term) {
                                return {
                                    sSearchTerm: term
                                };
                            },
                            results: function (data) {
                                return {
                                    results: $.map(JSON.parse(data), function (item) {
                                        return {
                                            text: item.term,
                                            slug: item.slug,
                                            id: item.Id
                                        }
                                    })
                                };
                            }
                        },
                        multiple: true
                    });

【讨论】：