How to add options to aui-select via JavaScript Edited

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.

 

1 answer

1 accepted

Accepted Answer
0 votes
Micky Caritte Community Champion Nov 29, 2017

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!

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Sep 18, 2018 in Jira

What modern development practices are at the heart of how your team delivers software?

Hey Community mates! Claire here from the Software Product Marketing team. We all know software development changes rapidly, and it's often tough to keep up. But from our research, we've found the h...

20,848 views 2 7
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you