Select Field With Auto Completion

If you are using a select field for some query parameters, an auto completion field can be very handy. This can be achieved using a custom template that includes the Confluence AUI Select2.

The Select Field Code

We minimized the template to display only the select field itself to make it easier to understand. To actually use this field, you will need to incorporate it into the "Change params template". Refer to the Datepicker Template Example for an example on how to include your own custom fields into this template.

The select field itself is a basic one. The important part are the first few lines of this code, that load the required resources and then enable the autocomplete functionality.

CODE

## Enable autocomplete for select field. The "id" tag of the <select> has to be the same as here in this function
## (e.g. "pocketquery-select-example" in this case)
$webResourceManager.requireResourcesForContext("com.atlassian.auiplugin:aui-select2")
<script type="text/javascript">
AJS.toInit(function(){
    AJS.$("#pocketquery-select-example").auiSelect2();
});
</script>
 
## form to offer the dropdown
<form method="get" class="aui  action="">
 
    ## dropdown
  <div class="field-group">
    <label for="pq_myOption">Options</label>  ## label
    <select class="select" id="pocketquery-select-example" name="pq_myOption"> ## dropdown
      <option value="1">Option One</option>
            <option value="2">Option Two</option>
            <option value="3">Something else</option>
            <option value="4">Another option</option>
    </select>
  </div>
     
</form>

The id of the select element (in this case "pocketquery-select-example") must fit the one in the Java Script trigger part in line 6.

If you want to allow multiple values and achieve a tag-like appearance, simply add the attribute "multiple" to your select field. A placeholder text can be displayed, too.

<select class="select" id="pocketquery-select-example" name="pq_myOption" data-placeholder="Select an option" multiple>