Auto-populate SharePoint list form fields from the Person/Group field by clicking Peoplepicker control

I've used REST API and SPServices to achieve this in my project. The script is applicable to SharePoint Online sites.

<script type="text/javascript" src="../../SiteAssets/Scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../SiteAssets/Scripts/jquery.SPServices-2013.01.min.js"></script>
<script type="text/javascript">

var user = "";
var userTitle = "";

$(document).ready(function(){
$("select").css("width", "386px");


$("#ctl00_ctl40_g_2b60364b_ff3b_4edb_bb3d_0a7210405747_UserSPObject_ctl00_ctl00_UserField_upLevelDiv").blur(function() {

userTitle=$().SPServices.SPFindPeoplePicker({
  peoplePickerDisplayName: "User Email",  
  checkNames: true
});
userTitle="i:0%23.f|membership|"+userTitle.currentValue;

PopulateDetails(userTitle);
});


//Code to retrieve the user properties
function PopulateDetails(userEmail){
//alert("entered details");
$.ajax({

  url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='"+userEmail+"'",          
            type: "GET",
            cache: true,
            async: false,
            headers:{"ACCEPT": "application/json;odata=verbose"},
            success: function (data) {
           
$("input[title='Title']").val(data.d.Title);

                try {
             
                    //Get properties from user profile Json response

                    var properties = data.d.UserProfileProperties.results;
                    for (var i = 0; i < properties.length; i++) {                        
                        if (properties[i].Key == "FirstName") {
                        $("input[title='First Name Required Field']").val(properties[i].Value);
}
                     
                        if (properties[i].Key == "LastName") {
$("input[title='Last Name Required Field']").val(properties[i].Value);
                        }
                     
                        if (properties[i].Key == "WorkPhone") {
                            $("input[title='Employee Phone Number']").val(properties[i].Value);                                                    
                        }
                       
                        if (properties[i].Key == "Manager") {
                     
user = properties[i].Value;
$().SPServices.SPFindPeoplePicker({
    peoplePickerDisplayName: "Supervisor",
    valueToSet: user,
    checkNames: true
  });                        
                        }
                     
                        if (properties[i].Key == "Department") {
                        $("select[title='Departments Required Field'] option:selected").text(properties[i].Value)
                       
                        }
                        if (properties[i].Key == "Office") {
  $("select[title='Office Location Required Field'] option:selected").text(properties[i].Value);
                   
                        }

                     
                    }
                           
                } catch (err2) {
                    //alert(JSON.stringify(err2));
                }
            },
            error: function (jQxhr, errorCode, errorThrown) {
                alert(errorThrown);
            }
        });
}

/*
Reference:
http://sharepoint.stackexchange.com/questions/112232/how-can-i-generate-new-id-for-new-list-item-newform-aspx
http://sharepoint.stackexchange.com/questions/111148/get-list-item-id-from-newform-aspx
http://spjsblog.com/2011/04/23/redirect-from-newform-to-dispform-or-editform/
http://www.vrdmn.com/2013/07/sharepoint-2013-get-userprofile.html/
http://www.c-sharpcorner.com/UploadFile/sagarp/get-current-login-user-profile-properties-through-rest-api/
http://blog.barkalot.com/post/SharePoint-People-Editor-onChange-Event.aspx/
https://spservices.codeplex.com/wikipage?title=$().SPServices.SPFindPeoplePicker&ANCHOR
*/

</script>