SharePoint Client People Picker change event

Question

I am using the SharePoint:ClientPeoplePicker control in my custom SharePoint page and would like to fire a change event when a user is selected from the list of users. I can see that there are multiple div's, hidden form field, span's etc when the ClientPeoplePicker is rendered. I tried multiple things like:

$('input[id$="TopSpan_HiddenInput"]').on('change', function(){
    alert('People Picker Value Changed');
});

$('span.sp-peoplepicker-resolveList').on('change',function(){
    alert('People Picker Value Changed');
});

But none works. Here's my code for ClientPeoplePicker

<SharePoint:ClientPeoplePicker Required="false" ID="cppProjectManager" runat="server" Width="100%" Title="ProjectManager" PrincipalAccountType="User" Rows="1" AllowMultipleEntities="false"  />

Any help would be appreciated.

Answer 1

There are multiple events which you can handle for a Client People Picker Control. You can find detailed descriptions of those events this blog.

To get the onChange of people picker, use following JavaScript snippet.

Event will get two parameters – first one is the people picker id and second parameter is an array of selected users.

This event will be fired if anything changes, like if user type text, user select a user from auto-fill list or user removes selected user. You can easily hook into the event as shown below:

Updated Code

SPClientPeoplePicker.SPClientPeoplePickerDict.ctl00_PlaceHolderMain_cppProjectManager_TopSpan.OnValueChangedClientScript=function (peoplePickerId, selectedUsersInfo) {
    console.log('inside OnValueChangedClientScript');
};

Note : Check the client ID of people picker control by inspecting the HTML. Most probably it will be ctl00_PlaceHolderMain_cppProjectManager_TopSpan.

Answer 2

You need to get the picker id for SharePoint Client People Picker change event. I have got the same using OnUserResolvedClientScript as below. Here to get the picker div I have followed the approach of getting it via the people picker text box id and the title name which you can get the by inspecting the element. put the below code in $(document).ready function and Njoy!

---

SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function() {
        var pickerDiv = $("[id^='Employee_x0020_Name'][title='Employee Name']");
        var picker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
        picker.OnUserResolvedClientScript = function(peoplePickerId, selectedUsersInfo) {
     //It will get the desired display name of the people from picker div, similarly any other property can be accessed via selectedUsersInfo
            var empname = selectedUsersInfo[0].DisplayText;
            console.log(empname);
        }
    });

Answer 3

A bit more detailed with Yayati's direction: