Please follow my prerequisite blog to add the jQuery dependency on the master page. The below jQuery code will work with jQuery dependency.

In this blog I will discuss how to use jQuery to auto complete the people field with the input person manager property. To do it please follow below steps

Step 1:

Navigate to my Github URL to download the below files from the repository

• getManager.js
• getManagerHtml.txt
• Leave App.stp

Step 2:

Upload the Leave App.stp to the List template Gallery. Then Create a list using the template uploaded. In my case I Created a list with name Leave Application.

Step 3:

Upload the files getmanager.js & getManagerHtml.txt to the Site Assets library under the site content. Usually I will create a folder scripts under Site Assets library to upload the files. So the sample below will use the siteassets/scripts/<file name>. If you uploading the file to different library make sure you change the path in the getManagerHtml.txt file.

Step 4:

Navigate to the List “Leave Application” you have created in Step 1: In my case it is under URL https://<sitecollection>/ms/Lists/Leave%20Application/AllItems.aspx , /ms is the subsite name I am using. In your case it may be different based on site name. Click on New Item to open the New Item form.

Locate the top settings icon and click on it to open Edit Page. This will allow to add webpart to the edit form. Add the content editor webpart. In the content editor webpart edit it to add the getManagerHtml.txt file path to it. After adding the Path save the Page.

Step 5:

So now the script will add the Get Manager button at run time next to the Input field. But before that you should set the correct ID of the control in the getManagerHtml.txt. Now go to the Site Assets library and then to the getManager.js file. Open the getManager.js in the favourite editor you have. You can open even in notepad. In my case I use the Visual Studio code to open the file. You can Map the folder to the Network drive to open it easier in VS code. The ID marked below in the picture has to be replaced by your ID.

To find out the ID use the developer tool in the browser to identify. I use Edge and F12 key to open the developer tool. Once you identify the ID replace it in the js file and save the file.

Once the changes are saved in the getmanager.js file, go back to the Leave Application New Item page and refresh. Now you should be able to see Get Manager button. Type the Name in the Applying People. Then click on the Get Manager button to auto fill the Manager on the Manager People Picker. The code will auto fill and then will make the control disable.

The Java Script code actually uses the People Manager api to get the Applying People control details. Get the Account name and call to the people manager API to get the manager. Once the Manager field is retrieved from CSOM it sets it to the People picker and automatically resolve the name in the control. You can modify the code to get other details if you wanted to.

Hope this works!!!