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?
Select2 jQuery plugin is easy to add on the <select > element. Need to call the select2() method on the selector to initialize. If you adding select2 on a class or select element and when you add an element dynamically then select2 is not initialized on that element.
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data.text, data.id, false, false); $('#mySelect2').append(newOption).trigger('change');
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
.
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; }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With