how can i initialise values and create tags on select2 ?

[Mehdi]

Hi , im using Atlassian Confluence Cloud
I create a function for select2 (version 3.5.3 used by atlassian) and it work perfectly except initialise values initSelection and create tags

function Select2_labels_test(input,space_key,label_list) {
input.auiSelect2({
width: 'value',
minimumInputLength: 0,
multiple: true,
tags: true,
tokenSeparators: [',', ' '],
ajax: {
url: function (params) {
return (
'/rest/api/space/'+space_key+'/?expand=metadata.labels'
);
},
type: "GET",
dataType: "json",
cache: true,
transport: function (params, success, failure) {
AP.request({
url: params.url,
type: "GET",
contentType: "application/json",
success: function (data) {
params.data = JSON.parse(data);
params.success(params.data);
},
});
},

results: function (data) {
console.log(data)
const results = [];
data.metadata.labels.results.forEach(function makeResults(element, index) {
console.log('element label ==> ' + JSON.stringify(element))
console.log('index label ==>' + index)
results.push({
label: element.label,
id: element.id,
});
console.log('RESULTS =====>> ' + JSON.stringify(results))
});
return {
results: results,
};
},
},
createTag: function (params) {
console.log('params')

var term = $.trim(params.term);
console.log(params)
if (term === '') {
return null;
}

return {
id: term,
label: term,
newTag: true // add additional parameters
}
},

data: function (term) {
console.log(term)
return {
term: term,
};
},
initSelection : function (element, callback , list_labels) {
var data = {id: 1, label: "Abolish"};
let list_labels = [];
list_labels.push({ id:"295109", label: "favourite"})
list_labels.push({ id:"20774913", label: "analytics"})
console.log(list_labels)
callback(list_labels);

},
id: function id(label) {
if (label.label == undefined) {
return label.id;
} else {
return label.id;
}
},
// define how selected element should look like
formatSelection: function formatSelection(label) {
if (input != "") {
input.parent().find('.list-creators').css("border-bottom", "1px solid lightgray");
input.append('<li creator_id="' + label.id + '" class="aui-dropdown2-checkbox interactive status-check list-creator-filter aui-dropdown2-interactive" resolved="" aria-checked="false" tabindex="0"><div class="search-creator-option-timeline"><div class="search-creator-option"><div class="search-creators"><div class="search-creator-name"><span class="search-profil-creator"><a href="#" target="_blank" class="confluence-userlink">' + label.label + '</a></span></div></div></div></div></li>');
}
return (
'<span style="display: flex;align-items: center" class="sp-dropdown-user-selector-li" id=' +
label.id +
">" +
Select2.util.escapeMarkup(label.label) +
"</span>"
);
},
// define how single option should look like
formatResult: function formatResult(label,container,query,escapeMarkup) {
var resultText =
label.label ;
var higlightedMatch = [];
// we need this to disable html escaping by select2 as we are doing it on our own
var noopEscapeMarkup = function noopEscapeMarkup(s) {
return s;
};
// highlight matches of the query term using matcher provided by the select2 library

Select2.util.markMatch(
escapeMarkup(resultText),
escapeMarkup(query.params),
higlightedMatch,
noopEscapeMarkup
);
// convert array to string
higlightedMatch = higlightedMatch.join("");
return higlightedMatch;
},
// define message showed when there are no matches
formatNoMatches: function formatNoMatches(query) {
return "No matches found";
},
}).select2("val", label_list);
}

[Shannon S · Accepted solution]

Hi Mehdi,

Thank you for your question! Unfortunately, this Community is mostly end-users of Atlassian products, so you may not find the answer here.

We have an Atlassian Developer forum that might suit your question. You can visit them below:

https://community.developer.atlassian.com/

I hope it helps!

Take care,

Shannon

[Mehdi]

Hi @Shannon S  thank u i will ask them there