Saturday, 17 October 2015

Clear People Picker SharePoint Using JQuery

Hi, this post describes how to clear the client side people picker.

 My client side People picker is as follows:

<SharePoint:ClientPeoplePicker ID="peoplePickerProjectManager" runat="server" AllowMultipleEntities="false" Required="true" ValidationEnabled="true" />

You can place it in any .aspx page. Use as follows:

First you need to know the People Picker Id generated by application. We can get this easily by using browser developer tool , observe the following image.




Here people picker Id is "ctl00_SPWebPartManager1_g_3a92cac2_9070_4c21_a117_8cb64a33bc5f_ctl00_peoplePickerProjectManager_TopSpan" , with this id we can clear the people picker using jquery function as follows:

function clearPeoplePicker(peoplePickerId) {
        var spclientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerId];
        var ResolvedUsers = $(document.getElementById(spclientPeoplePicker.ResolvedListElementId)).find("span[class='sp-peoplepicker-userSpan']");
        $(ResolvedUsers).each(function (index) {
            spclientPeoplePicker.DeleteProcessedUser(this);
        });
    },

We need to pass the people picker id which is like as mention above.

That's all, I hope this helps you.

Thank You...