How to populate people picker control with Jquery?

Question

Pulling the Approver(s) via REST call brings me the data I want, but am not having success populating a SharePoint People Picker control with the results.

if (data.d.Approvers != undefined) {
var xUser = data.d.Approvers.Name;
var ppTitle = "Approvers";
var ppDiv = $("[id$='ClientPeoplePicker'][title=' + ppTitle + ']");
var ppEditor = ppDiv.find("[title=' + ppTitle + ']");
//var spPP  = SPClientPeoplePicker.SPClientPeoplePickerDict[ppDiv[0].id];
ppEditor.val(xUser);
//spPP.AddUnresolvedUserFromEditor(true);}

The first few characters of the identity (example: i:0#.f|membership|[email protected]) is displayed in the control, but it does not resolve. The resolve functionality simply makes the result disappear altogether.

I've gone through available posts on this subject, here and elsewhere. This is the closest I've been able to get. Any suggestions are welcome.

Answer 1

I've done something similar to populate the current user in a people picker field. I use the user's email address though, and I call AddUnresolvedUser and pass in a minimal user object to set the value through the actual picker API, instead of trying to set the value of the text field and calling AddUnresolvedUserFromEditor.

$(document).ready(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(loadCurrentUser, 'clientpeoplepicker.js');
});

function loadCurrentUser() {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
        var currentUserRequest = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + '/_api/web/currentuser',
            method: 'GET',
            headers: {
                "accept": "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose"
            }
        });
        currentUserRequest.done(function (result) {
            var peoplePickerCtrl = $('nobr:contains("My User Column Name")').closest('tr').find('div.sp-peoplepicker-topLevel')
            var peoplePickerCtrlId = $(peoplePickerCtrl).attr('id');
            var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerCtrlId];
            var userObj = { 'Key': result.d.Email };
            peoplePicker.AddUnresolvedUser(userObj, true);
        });
    });
}