2017-12-13 4 views
1

Meine JSON-Antwortdaten enthalten kein ID-Feld, das von Select2 benötigt wird, um Ergebnisse anzuzeigen. In der Dokumentation bieten sie eine Möglichkeit, ID zu generieren, war jedoch nicht in der Lage. Kann jemand ein Beispiel geben, wie man das macht? Ich habe dies bisher versucht:Select2 Generierungs-ID mit Ajax-Antwortdaten

$('.itemSearch').select2(
    ajax: { 
    type: "POST", 
    url: '/Default.aspx/TestMethod', 
    data: function(params){ 
     var query={ 
      message:params.term 
     } 
     return JSON.stringify(query); 
    }, 
    processResults: function (data) { 
       var data1 = $.map(data, function (obj) { 
        obj.id = obj.id || obj.ItemNumber; // replace pk with your identifier 
        return obj; 
       });       
     return { 
     results: data.items, 
     }; 
    } 
    } 
}); 

Antwort

1

Hier ist ein korrekter Code-Schnipsel, für index in map Funktion als id mit Select2:

var data = [{ 
 
    "text": "Test item no. 1" 
 
    }, 
 
    { 
 
    "text": "Test item no. 2" 
 
    }, 
 
    { 
 
    "text": "Test item no. 3" 
 
    }, 
 
    { 
 
    "text": "Test item no. 4" 
 
    } 
 
]; 
 

 
$('.itemSearch').select2({ 
 
    ajax: { 
 
    type: "POST", 
 
    url: '/echo/json/', 
 
    data: function(params) { 
 
     var query = { 
 
     message: params.term, 
 
     data: data 
 
     } 
 
     return { 
 
     json: JSON.stringify(query) 
 
     } 
 
    }, 
 
    processResults: function(data) { 
 
     var data1 = $.map(data.data, function(obj, idx) { 
 
     obj.id = obj.id || idx; 
 
     return obj; 
 
     }); 
 
     return { 
 
     results: data1, 
 
     }; 
 
    } 
 
    } 
 
});
<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.6-rc.0/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> 
 

 
<select id="myselect2" class="itemSearch" data-placeholder="click to load..." style="width:200px"> 
 
</select>

Eine Arbeits Geige ist verfügbar hier: https://jsfiddle.net/beaver71/7rqg3rck/


P. S .:

-Code-Schnipsel hier auf SO funktioniert nicht, weil es ein Ajax-Aufruf ist.

Im Gegensatz dazu ermöglicht Jsfiddle den Benutzern, diese Ajax-Aufrufe zu simulieren, aber im Beispiel werden Daten (über POST) an den Dienst "/ echo/json /" gesendet und aufgrund derselben Ajax-Anforderung zurückgespiegelt.