I encountered a situation in my application where we needed to display tags as separate values in a control, so we opted for Select2.
<select id="ddlGulfEmployee" multiple="multiple" style="display: none;
width:
100%;" class="form-control"></select>
</script>`$("#ddlGulfEmployee").select2({
ajax: {
url: '@System.Web.VirtualPathUtility.ToAbsolute("~/Home/GetMasterUser")',// '@Url.Action("GetMasterUser","Home") %>', //"../GetMasterUser",
dataType: 'json',
delay: 250,
data: function (params) {
debugger;
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data) {
debugger;
var arr = []
$.each(data, function (index, value) {
//debugger;
arr.push({
id: value.ID,
text: value.FirstName
})
})
return {
results: arr
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: function (people) {
debugger;
//debugger;
if (people.loading)
return people.text;
var markup = '<option value="' + people.id + '">' + people.text + '</option>';
return markup;
},
templateSelection: function (people) {
debugger;
return people.value || people.text
}
//,
//initSelection: function (element, callback) {
// debugger;
// callback($.map(element.val().split(','), function (id) {
// return { id: id, text: id };
// }));
//}
});
$("document").ready(function () {//I WANT LIKE THIS OPTION
//1 russell
$('#ddlGulfEmployee').select2('val', ["test1", "test2"], true);
});
`
While saving and retrieving data from a remote source works well, I am facing an issue when trying to display the saved values back in the control during editing.
Your assistance on this matter would be greatly appreciated.
Thank you.