Does Select2 allow for changing name of "text" key to something else?

Question

I have the following Select2 configuration.

$scope.select2Options = {
    simple_tags: false,
    placeholder : "Search for a language",
    multiple : true,
    contentType: "application/json; charset=utf-8",
    minimumInputLength : 3,
    ajax : {
        url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
        dataType : 'json',
        data : function(term) {
            return  {
                language : term
            };
        },
        results : function(data, page) {
            return {
                results :
                    data.map(function(item) {
                        return {
                            id : item.id,
                            text : item.description
                        };
                    }
            )};
        }
    }
};

This allows me to populate the select2 control properly.

However, an issue occurs when I use Ajax in order to post the whole form containing the tags (amongst other): the json array sent to the server contains objects with two properties named id and text whereas the server would require id and description.

see snippet from my json:

"languages":[{"id":46,"text":"Français"},{"id":1,"text":"Anglais"}]

Does select2 allow for changing the name of the text to something else?

Solution 1

Changing my js to the following sorted the issue:

function format(item) { return item.description; };

$scope.select2Options = {   
    simple_tags: false,
    placeholder : "Search for a language",
    multiple : true,
    contentType: "application/json; charset=utf-8",
    minimumInputLength : 3,
    data:{ text: "description" },
    formatSelection: format,
    formatResult: format,
    ajax : {
        url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
        dataType : 'json',
        data : function(term) {
            return  {
                language : term
            };
        },
        results : function(data, page) {
            return {
                results :
                    data.map(function(item) {
                        return {
                            id : item.id,
                            description : item.description
                        };
                    }
            )};
        }
    }
};

Notice: one has to use the Select2 top level attribute data.

Solution 2

Here's the bare minium of the configuration neccesary to use a custom id and text properties on ui-select2

$scope.clients: {
  data: [{ ClientId: 1, ClientName: "ClientA" }, { ClientId: 2, ClientName: "ClientB" }],
  id: 'ClientId',
  formatSelection: function (item) { return item.ClientName; },
  formatResult: function (item) { return item.ClientName; }
}

Solution 3

Select2 requires that the text that should be displayed for an option is stored in the text property. You can map this property from any existing property using the following JavaScript:

var data = $.map(yourArrayData, function (obj) {
  obj.text = obj.text || obj.name; // replace name with the property used for the text
  obj.id = obj.id || obj.pk; // replace pk with your identifier
  return obj;
});

Documentation