How to add options to aui-select via JavaScript

Emre Toptancı [OBSS]

I am developing a custom plugin for Jira. In one of the UI pages I am using AUI Single Select (aui-select) control and want to populate options for this select in "jQuery(document).ready(function()".

The options are pulled from a REST service up front and is available as a JSON array.

Below is the code I use to append values to the aui-select  ...

jQuery(document).ready(function() {
.
.
.
var fields = JSON.parse(valueStringFromRESTService);
var drpFields_datalist = AJS.$("#drpFields datalist");
for (var i = 0; i < fields.length; i++) {
var newOption = "<aui-option id=" + fields[i].value + " value=" + fields[i].value + ">" + fields[i].label + " ( " + fields[i].value + " )</aui-option>";
   drpFields_datalist.append(newOption);
}

 The values are added successfully, I can see in the DOM but autocomplete does not see them. I can see part of the list when I click the dropdown button of the control but does not list values as I type. It acts as if there is nothing in the list.

I guess it doesn't like the fact that I am adding options via simple string append. What is the recommended way of adding aui-option's to an aui-select control at run-time via JavaScript?

Note: I saw the related question and answers:

https://community.atlassian.com/t5/Questions/How-to-add-a-new-option-to-single-select-programmatically/qaq-p/1736/jump-to/first-unread-message

Actually I am not convinced because I can see that I can add the options, just autocomplete refuses to see them. There should be an option to make autocomplete see the new options. Maybe refreshing autocomplete index or put the new values into whatever place autocomplete is keeping its options.

 

miikhy

Hi Emre,

I would recommend you to use select2 from AUI instead of aui-select!

It's documented here: https://docs.atlassian.com/aui/latest/docs/auiselect2.html

It's closer to the Atlassian interface and as you have to "enable" the select 2, you just have to create all options before calling the AJS.$().select2();

I guess the Single Select works the same: you have to make sure all options are loaded before the script is executed which can be handled by loading those values from the JiraWebAction directly in velocity instead of loading them through Javascript if possible of course!

Hope this helps!