how can i initialise values and create tags on select2 ?
Asked by 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);  
}


Answers:
author: Shannon S
body: 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

comments: author: Mehdi
body: Hi [@Shannon S](/t5/user/viewprofilepage/user-id/510046) thank u i will ask them there


Tags: aui

cloud

confluence-cloud