Custom autocomplete multi select in MacroBrowser

[Christopher Klinge]

Hi,

I'm currently working on a macro plugin for Confluence. As part of this, I need to write some custom autocomplete parameter fields for the MacroBrowser. I have managed to create a Select2 field with a custom AJAX call to dynamically fetch options. Selecting and saving the chosen parameters works just fine, but if the macro is edited on a later date, chosen options are not displayed in the select field. They are selected however, as they cannot be selected again and will remain set, if new options are added.

This is the code I have thus far (using labels as an example):

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());
            var input = $("input", paramDiv);
            var field = AJS.MacroBrowser.Field(paramDiv, input, options);

            field.input.auiSelect2({
                minimumInputLength: 1,
                multiple: true,
                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
                        };
                    }
                }
            });

            return field;
        }
    }
};

AJS.MacroBrowser.setMacroJsOverride("autocomplete-test", jsOverrides);

[Florian Maupas]

In Case someone ever end up on this post, here is a working example based on @Christopher Klinge original post:

// 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 data = [];
 
 $(getParameters()).each(function () {
 data.push({id: this, text: this});
 });
 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
 };
 }
 }
 });
 field.input.val("change").trigger('change');

 return field;
 }
 }
};

 AJS.MacroBrowser.setMacroJsOverride("page graph relationship", jsOverrides)
 AJS.MacroBrowser.setMacroJsOverride("inbound outbound table", jsOverrides)

});

[Florian Maupas]

There is still a bug while loading the previous labels and closing it ( it would open a tag for some reasons...)

[Florian Maupas]

Hi Christopher,

I am trying to do something very similar. To be exact, I am trying to mimic the autocomplete label behavior of the "content by label" macro. 

Did you figure out how to keep / display the previous label ?

I would also be interested at your macro xhtml definition :)

Thanks in advance,