AUI Select2

Ask a question

Summary

Select2 is a third party replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

AUI wraps Select2 v3.5.4 and styles it according to the Atlassian Design Guidelines (ADG).

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-select2
AMD Module key: N/A
Experimental API: 5.3
General API: 5.8

Examples

Multi select

Demo code
Result
  • No matches found
AخA
 
<form class="aui">
    <label for="select2-example">Product:</label>
    <select id="select2-example" multiple>
        <option value="CONF">Confluence</option>
        <option value="JIRA">JIRA</option>
        <option value="BAM">Bamboo</option>
        <option value="JAG">JIRA Agile</option>
        <option value="CAP">JIRA Capture</option>
        <option value="AUI">AUI</option>
    </select>
</form>
 
AJS.$("#select2-example").auiSelect2();

Single select

Demo code
Result
Confluence
 
<form class="aui">
    <label for="select2-example2">Product:</label>
    <select id="select2-example2">
        <option value="CONF">Confluence</option>
        <option value="JIRA">JIRA</option>
        <option value="BAM">Bamboo</option>
        <option value="JAG">JIRA Agile</option>
        <option value="CAP">JIRA Capture</option>
        <option value="AUI">AUI</option>
    </select>
</form>
 
AJS.$("#select2-example2").auiSelect2();

Options

These docs only show the method to call the ADG-styled Select2. The options passed into the function are the same as the original Select2.

Go to Select2 v3.5.4 docs.

However, we have some custom options that can be set in the options object:

Option Type Default Description
searchLabel String undefined Custom text for the search field label which will be announced by screen readers on opening single select dropdown and on focusing multi-select search input. If not provided, the original label text is announced, as in the examples above.