Client people picker

Initialize

 $(document).ready(function () {
    // Specify the unique ID of the DOM element where the picker will render.
    initializePeoplePicker('peoplePickerDiv');
});

var jk={};
jk.initializePeoplePicker=function (peoplePickerElementId) {
    // Create a schema to store picker properties, and set the properties.
    var schema = {};
    schema['PrincipalAccountType'] = 'User';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = false;
    schema['MaximumEntitySuggestions'] = 50;
    //schema['Width'] = '280px';
    schema['OnUserResolvedClientScript'] = 'af.GetUser';

    SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}
jk.GetUser=function(topElementId, users){        
    var peoplePickerId=topElementId.split("_")[0];
    //var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[topElementId];
    if(users.length>0){
            if(users[0].IsResolved){
            var loginName=users[0].Key;
            var userName=users[0].DisplayText;
            jk.userName[peoplePickerId]=userName;

            jk[peoplePickerId]={};
            jk[peoplePickerId].userName=userName;
            jk[peoplePickerId].loginName=loginName;
            jk[peoplePickerId].email=users[0].EntityData.Email;

            jk.GetUserId(peoplePickerId,loginName);
        }            

        //add user to group
        //var approverGroup=af.getGroupName("Approver");
        //$pnp.sp.web.siteGroups.getByName(approverGroup).users.add(loginName);
    }
}
jk.GetUserId=function(peoplePickerId,loginName){
    $pnp.sp.web.ensureUser(loginName).then(function (user)
    {
        var u = user;
        jk.loginName[peoplePickerId]=user.data.Id;
        jk[peoplePickerId].userId=user.data.Id;            
    });
}

Add user

var userField = $("#Admin_TopSpan_EditorInput").get(0);
var peoplepicker = SPClientPeoplePicker.PickerObjectFromSubElement(userField);
peoplepicker.AddUserKeys(loginName);

Remove users

var spclientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId]; 

if (spclientPeoplePicker) {

//Get the Resolved Users list from Client People Picker
var ResolvedUsers = $(document.getElementById(spclientPeoplePicker.ResolvedListElementId)).find(“span[class=’sp-peoplepicker-userSpan’]”);

//Clear the Client People Picker

$(ResolvedUsers).each(function (index) {

spclientPeoplePicker.DeleteProcessedUser(this);

});
}