javascript - ¿Cómo usar ajax en select2?

Estoy trabajando en asp.net core. Estoy usando TypeScript. Estoy usando Select2.

HTML:-

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

Guion:-

  $(".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 y 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>

Tomo los valores para select2 desde el controlador. Al usar este código, los valores se devuelven desde el controlador. Pero no se enlazan en el menú desplegable de select2.

Devolví los datos Json desde el controlador.

¿Alguien puede sugerir qué error he cometido?

Versión de select2: 4.0.3

Respuesta #1

Necesitas mapear el resultado devuelto por la 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 espera que los atributos id y text estén presentes para mostrar la lista

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