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



a template used to populate the value for the input


a message to display when no results returned


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


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


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.


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.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