SharePoint custom People Picker

Add the following references to HTML:

<script type="text/javascript" src="/_layouts/15/clienttemplates.js"></script>
<script type="text/javascript" src="/_layouts/15/clientforms.js"></script>
<script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script>

<script type="text/javascript" src="/_layouts/15/autofill.js"></script>

HTML Content:

<label for="AssignedTo">Assigned To</label>
<div id="AssignedTo"></div>
<label for="CopyTo">Copy To</label>

<div id="CopyTo"></div>


JavaScript Content:

// Call methods on page load

$(function () {

    SP.SOD.registerSod('sp.js', '/_layouts/sp.js');

    // Call this method to initialize the people picker

    initializePeoplePicker("AssignedTo"); // People Picker 1

    initializePeoplePicker("CopyTo");   // People Picker 2

    // Call this method in edit form. This method will get the data from the list using the // item id and bind the names in page load.

    var pickerVal = BindUsersFromList();

});

// This method will take the div ID as parameter and converts that to a people picker.

// peoplePickerElementId: Div ID

function initializePeoplePicker(peoplePickerElementId) {

    // Create a schema to store picker properties, and set the properties.

    var schema = {};

    schema['SearchPrincipalSource'] = 15;

    schema['ResolvePrincipalSource'] = 15;

    // "AllowMultipleValues" property will allow multiple entries. Make it false to restrict //this people picker to accept only one  user.

    schema['AllowMultipleValues'] = true;

    schema['MaximumEntitySuggestions'] = 50;

    schema['Width'] = 'auto';

    // Render and initialize the picker.

    // Pass the ID of the DOM element that contains the picker, an array of initial

    // PickerEntity objects to set the picker value, and a schema that defines

    // picker properties.

    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);

}

Note:
The above JS code will convert the HTML div into a people picker.
Now the below JS code will get the data from the SharePoint list using item ID and bind the values to people picker.

// This method will bind the users to people picker field in edit form.

function BindUsersFromList() {

    var dfd = new $.Deferred();

    var divPeopleSIT = SPClientPeoplePicker.SPClientPeoplePickerDict["AssignedTo_TopSpan"];

    var divPeopleAMM = SPClientPeoplePicker.SPClientPeoplePickerDict["CopyTo_TopSpan"];

    SP.SOD.executeFunc('sp.js', null, function () {

        JSRequest.EnsureSetup();

        var itemID = JSRequest.QueryString["ItemID"];

        if (window.location.href.indexOf('ItemID=') > -1) {

            var call = getEditformDataFromList(itemID);

            $.when(call).then(function (data) {

                if (data.d.AssignedToId != null) {

                    for (var i = 0; i < data.d.AssignedToId.results.length; i++) {

                        divPeopleTSDM.AddUnresolvedUser({ 'Key': GetUserLoginName(data.d.AssignedToId.results[i]) }, true);

                    }

                }

                if (data.d.CopyToId != null) {

                    for (var i = 0; i < data.d.CopyToId.results.length; i++) {

                        divPeopleSIT.AddUnresolvedUser({ 'Key': GetUserLoginName(data.d.CopyToId.results[i]) }, true);

                    }

                }

            });

            dfd.resolve();

        }

    });

    return dfd.promise();

}

// This rest call will take the item ID as input and give that Item data in return.

// itemID: List Item ID

function getEditformDataFromList(itemID) {

    return $.ajax

    ({

        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('LIST NAME HERE')/items(" + itemID + ")",

        method: "GET",

        headers: { "Accept": "application/json; odata=verbose" },

    });

}

// This will take the People picker Id and return the entered user's Login Name

function GetUserLoginName(pickerID) {

    var userName;

    $.ajax({

        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/GetUserById(" + pickerID + ")",

        type: "GET",

        async: false,

        headers: {

            "X-RequestDigest": $("#__REQUESTDIGEST").val(),

            "content-type": "application/json;odata=verbose",

            "accept": "application/json;odata=verbose"

        },

        success: function (userData) {

            userName = userData.d.LoginName;

        }

    });

    return userName;

}

Now, get the number of users entered in the people picker field.

var getUsersData = getUserIdsFromPicker(valObj.Id);

var length = getUsersData.length;

// Get the user ids of the persons entered in the people picker

// divID: ID of the div/PeoplePicker

function getUserIdsFromPicker(divID) {

    var pickerDiv = "#" + divID + "";

    noOfUser = $(pickerDiv + "_TopSpan_ResolvedList").children().length;

    userIds = new Array(noOfUser);

    $(pickerDiv + "_TopSpan_ResolvedList").children().each(function (index, value) {

        $.when(GetUserId($(this).attr("sid"))).then(function (data) {

            userIds[index] = data.d.Id;

        });

    });

    return userIds;

}

// This will return a object which will have the user Ids of the person.

// userName: SID of the user

function GetUserId(userName) {

    var siteUrl = _spPageContextInfo.siteAbsoluteUrl;

    return $.ajax({

        url: siteUrl + "/_api/web/siteusers(@v)?@v='" +

            encodeURIComponent(userName) + "'",

        method: "GET",

        async: false,

        headers: { "Accept": "application/json; odata=verbose" },

    });

}

------------------------------------------------------------------END--------------------------------------------------------------