Add multiple users in one textarea

[Mark Yao]

Hi,

I am learning Confluence and I am trying to create a textarea in confluence to display user names.

select.bmp

I hope I could search users from smaller box, click select button and display multiple users' names in bigger box.

I have done some codes, but it is not quite what I want.

<p><textarea id="display"></textarea></P> 
 
<script>
function attendee() {
var input = document.getElementById ("userName").value;
   document.getElementById("display").innerHTML = input;
}
</script>
 

<input id="userName" class="text long-field autocomplete-user"/>
<input onclick="attendee()" value="Select" type="button">

Please give me some help and thank you very much to all.

[Stephen Deutsch · Accepted solution]

Here are two options:

The first is similar to what you were doing originally:

<form class="aui" onsubmit="return false;">
  <p><textarea id="userName-display" class="textarea"></textarea></p>
  <input id="userName" class="autocomplete-user text" data-none-message="No users found" data-template="{username}"/>
  <p><input class="aui-button" onclick="attendee()" value="Select" type="button"></p>
</form>
<script>
function attendee() {
  document.getElementById("userName-display").value += document.getElementById("userName").value + "; ";
  document.getElementById("userName").value = "";
}
</script>

The second one uses some built in Confluence features and is much more elegant in my opinion:

<form class="aui" onsubmit="return false;">
  <input id="username-picker" type="text" class="text long-field autocomplete-multiuser select2-offscreen" name="user" placeholder="Who?" data-autofill-user="false" tabindex="-1">
</form>
<script>
AJS.toInit(function() {
  jQuery("#username-picker").auiSelect2();
});
</script>

You can then get these usernames in an array by using

document.getElementById("username-picker").value.split(",")

[Mark Yao]

Thank you very much Stephen, it is what I need and it works perfectly.

[Mark Yao]

Especially the second one, it is working like a charm.