javascript - 如何在select2中使用ajax？

Question

我在 asp.net 核心工作。我正在使用 typescript 。我正在使用 select2。

HTML:-

  <select multiple="multiple" id="e1" class="js-example-basic-multiple js-states form-control js-data-example-ajax">
  </select>

脚本:-

  $(".js-data-example-ajax").select2(
        {
            ajax: {
                url: '/place',
                dataType: 'json',
                type: "GET",
                data: function (term) {
                    return {
                        term: term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.items,
                    };
                }
            },

           });

css 和 js:-

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

我从 Controller 中获取 select2 的值。使用此代码时，值从 Controller 返回。但不绑定(bind)在 select2 下拉列表中。

我从 Controller 返回了 Json 数据。

谁能指出我犯了什么错误？

select2 版本:4.0.3

Answer 1

您需要映射 api 返回的结果。

https://jsfiddle.net/vg7pgbcb/1/

$(".js-data-example-ajax").select2(
    {
        ajax: {
            url: 'https://api.github.com/search/repositories',
            dataType: 'json',
            type: "GET",
            delay: 250,
            data: function (params) {
                return {
                    q: params.term
                };
            },
            processResults: function (data) {
                    var res = data.items.map(function (item) {
                        return {id: item.id, text: item.name};
                    });
                return {
                    results: res
                };
            }
        },

       });

select2 期望 id 和 text 属性呈现列表

{
"results": [
    {
        "id": "CA",
        "text": "California"
    },
    {
        "id": "CO",
        "text": "Colarado"
    }
]
}