How to set user in multi allow people picker control using javascript

Question

I want set the value to the people picker control which is multi allowed.

I have a code which assigns only single value to it, which is as below:

    $(document).ready(function () {
        alert('Hello');
        SetAndResolvePeoplePicker("Members","domain\\user");
    });

    function SetAndResolvePeoplePicker(fieldName, userAccountName) {

        var controlName = fieldName;

        var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + controlName + "']");

        var peoplePickerEditor = peoplePickerDiv.find("[title='" + controlName + "']");

        var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];

        peoplePickerEditor.val(userAccountName);


        spPeoplePicker.AddUnresolvedUserFromEditor(true);
    }

All things I have applied in is jslink.

Answer 1

Found the answer:

Just simply call the function multiple times.

Such as:

$(document).ready(function () {
    alert('Hello');
    SetAndResolvePeoplePicker("Members","domain\\user0");
    SetAndResolvePeoplePicker("Members","domain\\user1");
    SetAndResolvePeoplePicker("Members","domain\\user3");
});

It will add all the users to people picker. Hope this helps to other also...!!! :-)

Answer 2

Try adding values directly to people picker object, not through html input.

Replace this

peoplePickerEditor.val(userAccountName);
spPeoplePicker.AddUnresolvedUserFromEditor(true);

With this

spPeoplePicker.AddUserKeys(userAccountName);

AddUserKeys accepts ";" separated list of domain names, adds them to people picker and tries to resolve it.

Answer 3

Actually, spservices has a solution.

Here is the documentation.