Autocomplete with Label within MacroBrowser (like the "content by label" macro)

Hi,

I have a macro that takes into parameters some label. For a proper UX experience, I would like to mimic the behavior of the “Content by label” macro with regards to the labels autocomplete and the load of the previous parameters. To do this I am using auiSelect2.

So far I have been able to load the previous labels using the “initSelection” (plus triggering a change after) or thanks to the setValue() function. However if I am try to remove one of the pre-loaded label by click on the x, it opens a new tab. I have been trying preventDefault() but it doesn’t fix it, and I can’t figure out where this behavior come from.

Here is the current working code:

// bind on initialization of editor
AJS.bind("init.rte", function() {

    var getParameters = function() {
        var selection = AJS.Rte.getEditor().selection.getNode();
        return $(selection).attr("data-macro-parameters").split("=")[1].split(",");
    }

    var jsOverrides = {
        "fields" : {
            "string" : function(params, options){

                if (params && params.name != "labels") {
                    return AJS.MacroBrowser.ParameterFields["string"](params, options);
                }

                var paramDiv = $(Confluence.Templates.MacroBrowser.macroParameter());
                console.log(paramDiv);
                var input = $("input", paramDiv);
                var field = AJS.MacroBrowser.Field(paramDiv, input, options);
                auiSelect2 = input;
                field.input.auiSelect2({

                    minimumInputLength: 1,
                    multiple: true,
                    initSelection : function (element, callback) {
                        var id = $(element).val();

                        // working code 
                        var data = [];
                        
                        $(getParameters()).each(function (index, value) {
                            data.push({id: index, text: value});
                        });
                        callback(data);
                    },

                    ajax: {
                        url: AJS.params.baseUrl + "/labels/autocompletelabel.action",
                        dataType: 'json',
                        type: 'GET',
                        data: function(query) {
                            return {
                                query: query,
                                maxResults: 3
                            }
                        },
                        results: function(data, params) {

                            var results = [];
                            var matches = data.contentNameMatches;
                            for (var i = 0; i < matches[0].length; ++i) {
                                var match = matches[0][i];
                                results.push({
                                    id: match.name,
                                    text: match.name
                                });
                            }
                            return {
                                results: results
                            };
                        }
                    }
                });
                //Work by it self but I would rather use the initFunction for initialization
                // field.input.select2('data',getInitValuesForParameters(getParameters())).trigger('change');
                //If initFunction is used we need to trigger the change ...
                field.input.val("change").trigger('change');
                return field;
            }
        }
    };

    AJS.MacroBrowser.setMacroJsOverride("my macro with auiselect2 autcomplete labels", jsOverrides)


});

Would someone know how to properly have the auiselect2 properly instantiated with initials values ?

Thanks in advance,

Florian

If anyone end up in a similar situation, I found the solution on this topic: https://community.atlassian.com/t5/Confluence-questions/How-to-make-a-parameter-a-label-picker-in-the-Macro-Browser/qaq-p/377605#U1011378 . Using the prototype beforeParamsRetrieved will allows your parameter to be inserted after the “a” binding operation happens and the undesired behavior goes away.

Big thanks to Scott Selberg for posting his solution.