Wie benutzt man Ajax in select2?

Question

Ich arbeite in asp.net Kern. Ich benutze Typoskript. Ich benutze 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 und 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> 

Ich nehme die Werte für select2 von der Steuerung. Bei Verwendung dieses Codes werden die Werte vom Controller zurückgegeben. Aber nicht im Dropdown-Menü select2 binden.

Ich gab die Json-Daten vom Controller zurück.

Kann jemand vorschlagen, welchen Fehler ich gemacht habe?

Version von select2: 4.0.3

Answer 1

Sie benötigen Ergebnis von api zurück abzubilden.

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 und Textattribut erwarten, dass die Liste

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