Select2 - Multi Select Autocompletion - Programmatically population of field

Question

I am using the bundled AUI Select2 Lib in a JIRA 8.13 instance.

What I would like to try is to code an autocompletion field with multiple values. My main components are running so far, but I have some problems while populating the field programmatically via JavaScript.

This my basic setup:

   field.auiSelect2(
   {
      multiple: true,
      closeOnSelect: true,
      tokenSeparators: [","],
      placeholder: PLACEHOLDER,
      minimumInputLength: 2,
      formatResult: format,
      initSelection: function (element, callback) {
         callback({id: $(element).val(), text: $(element).val()});
      },
      ajax: {
         url: <...>,
         dataType: 'json',
         data: function (term) {
            return {term: term,};
         },
         results: function (results) {
            return results;
         },
         quietMillis: 250,
         cache: false
      },
   });

The field population code is the following:

field.val(["A","B","C"]).trigger('change');

But this results in a single entry in the input field value "A,B,C" which is wrapped within a single gray box instead of multiple boxes - one for each passed value.

Any ideas on how to solve this issue? I guess it might be related to the initSelection parameter.

https://codepen.io/aschuma/pen/rNLRLWL

Answer 1

   $(field).auiSelect2("data", [{id: "A", text: "A"},{id:"B", text: "B"},{id:"C", text: "C"}]); 

https://codepen.io/aschuma/pen/ExyMNJP

Answer 2

This error is because you are using an <input> element instead of a <select> element. When you call this:

field.val(["A","B","C"]).trigger('change');

what you are really doing is setting the value of the <input> field which operates completely separately from select2. An <input> field can only have a single value, so it is likely that jQuery simply calls a standard .join() on the array and then sets the value to that. You can verify this is correct by simply opening a console and running:

console.log(["A","B","C"].join())

which will result in the string "A,B,C". What you might need is a <select> element which can support multiple values. Also note that the latest version of AUI Select2 (9.1.4) uses select2 version 3.4.5 instead of the latest version (4.0.13 as of the time of this post).

You could also set the data on the select2 instance itself like so:

$(field).auiSelect2('data', [
  {id: 'A', text: 'A'},
  {id: 'B', text: 'B'},
  {id: 'C', text: 'C'},
]); 

Answer 3

Found this thread because we had the same problem. I can confirm that it's also posible using elements if you use the following code.

   AJS.$('#customfield_14882').auiSelect2(
   {
  multiple: true,
  closeOnSelect: true,
  tokenSeparators: [","],
  placeholder: PlaceHolder,
  minimumInputLength: 1,
  allowClear:true,
  initSelection: function (element, callback) {
     var arr = $(element).val().split(',');
     var res=[]; 
     for(var i=0;i<arr.length;i++){
        res[i]={id:arr[i],text:arr[i]};
     }
     callback(res);
  },
  ajax: {
     url: "<url>",
     dataType: 'json',
     data: function (term) {  
       return {term: term};
     },
     results: function (results) {
       return {results:results};
     },
     quietMillis: 250,
     cache: false
    },
   });