JavaScript Components

This page documents some of Confluence's JavaScript components you can use in your plugin.

Autocomplete Input Fields

Confluence provides a number of autocomplete input components for the various content types. You simply need the right class on the input field. You can also configure the autocomplete with some 'data-' attributes (see table below). Events are fired on the input element via jQuery's event system, so clients can listen for the documented events.

Attribute name

Description

data-template

a template used to populate the value for the input

data-none-message

a message to display when no results returned

data-max

maximum number of search results, defaults to 10 if not defined

data-alignment

alignment of the autocomplete dropdown relative to the input field. Defaults to "left" alignment

data-dropdown-target

a target element selector to place the autocomplete dropdown in.

  • If none specified it will be placed in a div immediately after the input field.

data-target

a target element selector to update its value with the value provided by data-template.

  • This is typically useful when you want to display the user's full name in the input field but submit the username
  • to the server, so another input element needs to be updated.

Events Thrown:

  • open.autocomplete-content
  • selected.autocomplete-content

Space Autocomplete

<input class="autocomplete-space" data-max="10" data-none-message="No results" data-template="{name}">

Attachment Autocomplete

<input class="autocomplete-attachment" data-max="10" data-none-message="No results" data-template="{fileName}">

Page Autocomplete

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

Blog post Autocomplete

<input class="autocomplete-blogpost" data-max="10" data-none-message="No results" data-template="{title}">

Page and Blog post Autocomplete

<input class="autocomplete-confluence-content" data-none-message="No results" data-template="{title}">

All Content Autocomplete

This includes pages, blogs, spaces, users and attachments.

<input class="autocomplete-search" data-none-message="No results" data-template="{title}">

User Autocomplete

This component throws user specific events:

  • open.autocomplete-user
  • selected.autocomplete-user
<input class="autocomplete-user" data-none-message="No users found" data-template="{username}">

User Hover

You can easily turn a user link to provide more information on the user when hovering over it. Simply add the class confluence-userlink and a data attribute of data-username to your link tag.

Events thrown:

  • hover-user.open
  • hover-user.follow
<a class="confluence-userlink" data-username="admin">A. D. Ministrator</a>
Was this page helpful?

Have a question about this article?

See questions about this article

Powered by Confluence and Scroll Viewport