javascript - How to use ajax in select2? - Stack Overflow

admin管理员组

文章数量:1344241

I am working in asp core. I am using typescript. I am using select2.

HTML:-

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

Script:-

  $(".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 and js:-

 <link href=".0.3/css/select2.min.css" rel="stylesheet" />

 <script src=".1.1/jquery.min.js"></script>
 <script src=".0.3/js/select2.min.js"></script>

I take the values for select2 from the controller. When using this code, the values are returned from the controller. But not bind in the select2 dropdown.

I returned the Json data from the controller.

Can anyone suggest what mistake I have done?

Version of select2 : 4.0.3

I am working in asp core. I am using typescript. I am using select2.

HTML:-

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

Script:-

  $(".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 and js:-

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

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

I take the values for select2 from the controller. When using this code, the values are returned from the controller. But not bind in the select2 dropdown.

I returned the Json data from the controller.

Can anyone suggest what mistake I have done?

Version of select2 : 4.0.3

• javascript
• jquery
• ajax
• typescript
• jquery-select2

Share Improve this question Follow edited Aug 23, 2017 at 5:27 Nivitha G asked Aug 23, 2017 at 5:23 Nivitha GNivitha G 29344 gold badges77 silver badges1919 bronze badges 2

• what is data is returned by controller – Krishna Satya Commented Aug 23, 2017 at 5:26
• I returned the Json data. – Nivitha G Commented Aug 23, 2017 at 5:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You need to map result returned by api.

https://jsfiddle/vg7pgbcb/1/

$(".js-data-example-ajax").select2(
    {
        ajax: {
            url: 'https://api.github./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 expect id and text attribute to render the list

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

本文标签： javascriptHow to use ajax in select2Stack Overflow