Not being able to use AUI select2 data or ajax features

Hi All, I was trying to use AUI select2 in aui 7.8.1, but was unable to use what I consider necessary features that made me use select2 in the first place. After a little searching, I found that what caused the error is located in aui-experimental.min.js

if ("select" === (n = i.element).get(0).tagName.toLowerCase() && ( = r = i.element),
                    r && e.each(["id", "multiple", "ajax", "query", "createSearchChoice", "initSelection", "data", "tags"], function() {
                        if (this in i)
                            throw new Error("Option '" + this + "' is not allowed for Select2 when attached to a <select> element.")

Why is this code used?

Hi @kirutes89,

could you please also tell us what you consider to be an error and how you wanted to use the AUI select2 ?

Thanks for quick reply @pvandevoorde,
According to select2 documentation, which by the way I was referred from the AUI Select2 documentation, states that I could configure select2 by passing object to it, But when I do AUI throws a error.
Also which version of Select2 does AUI Select2 use?

Hi @kirutes89,

AUI uses version 3.4.5 of Select2. The unminified line of code reads as follows:

        // abstract
        prepareOpts: function (opts) {
            var element, select, idKey, ajaxUrl, self = this;

            element = opts.element;

            if (element.get(0).tagName.toLowerCase() === "select") {
       = select = opts.element;

            if (select) {
                // these options are not allowed when attached to a select because they are picked up off the element itself
                $.each(["id", "multiple", "ajax", "query", "createSearchChoice", "initSelection", "data", "tags"], function () {
                    if (this in opts) {
                        throw new Error("Option '" + this + "' is not allowed for Select2 when attached to a <select> element.");

It would seem that Select2 has code in it to reject configuration options that would conflict with the data it reads from a <select> element itself.

What does the code you’re using to initialise the AUI Select2 look like? What options are you passing in via your config object? What attributes exist on the <select> element? Are there any overlaps between those attribute names and the keys of your config object? If so, can you remove the duplicates?

AUI’s documentation links are linking to the latest version of Select2, which is misleading. I will address this problem against and release an updated version of the docs within the next day.

1 Like

Hi @daz,
Thank you for your helpful insight.
As I stated in my question why does AUI Select2 reject the configuration options.
Ooh, And here is the code that I am using to initialize the AUI Select2

              placeholder: "Select Project",
              data: dataArray

@kirutes89, I will guess that the element with an id of #selectId2 contains nested <option> elements? I believe Select2 is complaining because you are passing data as configuration, but the select element itself already has options. Select2 doesn’t know which set of options are correct, so it throws this error.

I believe that in order to fix this, you need to either:

  1. Remove the nested <option> elements from the <select id=selectId2> element, or
  2. Remove the data key from your configuration object.
1 Like

Thanks @daz,
#selectId2 doesn’t contain nested elements, I removed the data key from the configuration object for the work around which leaves me to populate the select2 by appending option elements.

But it would be really great that AUI couldn’t throw an error when using certain configuration key.

I understand your request @kirutes89, though this is native Select2 behaviour, not an AUI addition – see It is possible that the behaviour changed in the latest version of Select2, but I am not sure.


When I use auiSelect2 and provide the ajax parameter the auiSelect2 control just fails outright to initialize.

			placeholder: "Search for a User",
			minimumInputLength: 2,
            ajax: {
			 url: '',
			 data: function (params) {
			 var query = {
			 username: params.term

This is STANDARD Select2 behavior and is NOT related to AUI.

  • If you want to use data or ajax options, you MUST bind to <input /> ONLY.
  • Else, you can use a <select></select> to bind with, with predefined options.

This is how Select2 works.

1 Like

As of Select2 version 4, ajax options can be bound to select elements. See

Can you please confirm what version is included in Jira 8? Thank you!

No, I can’t do that. It’s v3.5.x is all I know.

Hi @GregKaufman @sfbehnke,

AUI still ships version 3.5.x of Select2. As a consequence, this is also the version available in Jira 8.x.

While the team is aware that AUI does not ship the latest version, an upgrade of the library is unplanned at this stage.

I have created to gather interest in the upgrade to Select2 version 4.x.

1 Like

Thanks @daz, it’s most appreciated.