Ajax/AJS autocompleter for page name

[ket.pjwstk]

Hi,

I want to add page name autocompleter for my textarea. The same that is used in move page dialog. How to?

[ket.pjwstk · Accepted solution]

Well, Ive implemented some workaround. I am feeding the var data with String pages.

var data = $pages;

Which in turn is velocity context variable build to represent js array.

["option1", "option2", ... ,"optionN"].

Any better idea would be helpful

[Joe Clark]

Have a gander at this function in Confluence's autocomplete-content.js.

/**
     * Page Autocomplete Binder Component.
     * <br>
     * Example markup:
     * &lt;input class="autocomplete-page" data-max="10" data-none-message="No results" data-template="{title}"&gt;
     *
     * Events Triggered:
     * open.autocomplete-content, selected.autocomplete-content
     *
     * @since 3.4
     * @class autocompletePage
     * @namespace Confluence.Binder
     */
    Confluence.Binder.autocompletePage = function(scope) {
        scope = scope || document.body;
        $("input.autocomplete-page", scope).each(function() {
            bind(this, "page", "{title}", contentDisplayHandler);
        });
    };

All you need is some HTML like this:

<div id="my-binder">
    <input class="autocomplete-page" data-max="10" data-none-message="No results" data-template="{title}">
</div>

And then call the binder like this:

AJS.toInit(function() {
   Confluence.Binder.autocompletePage(AJS.$("#my-binder"));
});

[Sven]

Cool. That works fine! ;-)

[Sven]

BTW: Is there a way to limit it to a certain space (by indicating a spacekey) ?

Or put the other way: As this Page-Autocomplete is "global" -> Is there a way to get from the title of page the information in which space this page is? (or its PageID)

(Problem is that getPage and storePage-API does request either pageID OR (title AND spacekey)...

Thanks in advance for any hint.

[David at David Simpson Apps]

Hopefully, you know the spaces that you want this to work in :)

If so, take @Joseph Clark's example & try this...

AJS.toInit(function() {
  if (AJS.params.spaceKey == 'MY-SPACE-KEY'){
    Confluence.Binder.autocompletePage(AJS.$("#my-binder"));
  }
});

...or loop through an array of spaceKeys...

var spaceKeys = ['A','B','C','D'];
AJS.toInit(function() {
  for (key in spaceKeys)
    if (AJS.params.spaceKey == key){
      Confluence.Binder.autocompletePage(AJS.$("#my-binder"));
    }
  }
});

[Sven]

Unfortunately I don't know the space to work with. So the idea is the following:

1) First input box with autocomplete to select a space.

2) Second input box on pages (as above), but limited to the former selected space.

I've found how to limit the pageautocomplete to a space:

<input name="combit_page_selector" class="autocomplete-page" data-spacekey="myspacekey" data-max="10" data-none-message="No results" data-template="{title}">

That works like a charm.

But I've no luck when I try to manipulate this "data-spacekey"-Attribute with JQuery... Any idea how this can be done? I want to take the selected spacekey from the inputbox and stuff it to the page-autocomplete-box (with the help of a button)

## @noparams

Spacesuche mit Auto-Vervollständigen
<div id="my-spacebinder">
    <input name="my_space_selector" class="autocomplete-space" data-max="10" data-none-message="No results" data-template="{key}">
</div>
  
Globale Seitensuche mit Auto-Vervollständigen auf Seitentitel:<br />
<div id="my-binder">
    <input name="my_page_selector" class="autocomplete-page" data-spacekey="" data-max="10" data-none-message="No results" data-template="{title}">
</div>

<input type="button" value="Einschränkung auf gewählten Space bei Seitensuche übernehmen!" onclick="jQuery('input[name=my_page_selector]').attr("data-spacekey","test");" />



<script>
jQuery(document).ready(function() {
   // read URL-Parameters to modifiy input controls
   jQuery('input[name=my_page_selector]').attr("data-spacekey", jQuery.urlParam('spacekey'));

   //jQuery('input[name=my_space_selector]').attr("value", jQuery.urlParam('spacekey'));

   // now do the binding = attributes are written
   Confluence.Binder.autocompletePage(AJS.$("#my-binder"));
   Confluence.Binder.autocompleteSpace(AJS.$("#my-spacebinder"));

  //alert('test');
  //alert(jQuery.urlParam('spacekey'));
});

Any hint is appreciated!

/EDIT

And yes, I'm trying to read the spacekey to use as default from "?spacekey=test" from URL. How?

/EDIT

[Thomas Wendel]

You could use the Confluence REST API ( http://docs.atlassian.com/atlassian-confluence/REST/latest/ ) to fetch all pages. The following JavaScript code wil give you an array ("pages") with all the page names your Confluence installation:

AJS.toInit(function () {
    AJS.$.get("/rest/prototype/1/search", function(xml) {
        var data = new Array();
        AJS.$(xml).find("result").each(function(i) {
            if (AJS.$(this).attr("type") === "page") {
                data.push(AJS.$(this).find("title").text());
            }
        });
        AJS.$("#myAutocomplete").autocomplete(pages);
    });
});

Instead of using $ as the jQuery function, it is nicer to actually use the function provided in the Atlassian JavaScript abstraction:

• https://developer.atlassian.com/display/CONFDEV/Including+Javascript+and+CSS+resources
• https://developer.atlassian.com/display/AUI/Atlassian+User+Interface+%28AUI%29+Developer+Documentation

Let me know if it works.

Cheers,

Thomas

[James Star]

How do you use the above ajax to call a method on a Java Class? And return some value?

Thank you,

James Star

[Mohamed Bouazza]

Thats how I solved the problem :

AJS.$('.autocomplete-space').live('selected.autocomplete-content', function(e, d) {
      AJS.$(this).attr('data-skey', d.content.key);
  });

 This way I always have an atribute containing the spacekey (data-skey)

[Sven]

The concept is interesting for me.

(I'm searching a way - probably by javascript - to select a space and a page inside of this space and then to add something to the content of this page)

Should the above mentioned javascript work? How?

I tried it with a simple usermacro (just <input id="myAutocomplete" [...] /> and putting the above script in the "CustomHTML-Before end of head"-section.

But nothing happens...

Thanks for your hints!

Bye

[ket.pjwstk]

For example if I use following code:

<script>
$(document).ready(function(){
var data = ???
$("#example").autocomplete(data);
});
</script>

What is the easiest way to feed data with pages from certian (even hardcoded) space?