Firstly you will have to get the login name of the person from the people picker. You can use SPServices.SPFindPeoplePicker
function for that.
After getting the loginID of the employee entered in people picker you can use GetUserProfileByName operation of sp services to get user profile data for that employee.
You can use the below code to get started. Make sure to call this code on change event of the people picker textbox.
function GetEmployeeDetails(){
var personField = "Employee Name"; // this must match the display name of the people picker field
var employee;
var employeeEmail;
var employeeLoginID;
// Get people picker value
employee = $().SPServices.SPFindPeoplePicker({
peoplePickerDisplayName: personField,
checkNames: true
});
employee.checkNames.click();
// get the users login id and email from the SPFindPeoplePicker dictionary
employeeEmail = employee.dictionaryEntries[0].Email;
employeeLoginID = employee.dictionaryEntries[0].AccountName;
// Get user information
$().SPServices({
operation: "GetUserProfileByName",
async: false,
AccountName: employeeLoginID,
completefunc: function (xData, Status) {
workPhone = getUserProfileValue(xData.responseXML, "WorkPhone");// here xData.responseXML will contain all user profile values.
}
});
}
// gets the value of the passed profile field
function getUserProfileValue(UPSResponseXML, upsField) {
var thisValue = $(UPSResponseXML).SPFilterNode("PropertyData").filter(function() {
return $(this).find("Name").text() == upsField;
}).find("Values").text();
return thisValue;
}