Client Side People Picker - SharePoint - Jquery

Hi, here I provide the code to handle the client side people picker from Jquery.

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 retrieve from and resolve user to people picker using jquery.

With the following function we can get the resolved users details.

function getResolvedEmails(peoplePickerId) {

        var users = [];

        var resolvedUsers = JSON.parse($('#' + peoplePickerDivId + ' input[id*=peUser_TopSpan_HiddenInput]').val());

        if (resolvedUsers.length > 0) {

            $.each(resolvedUsers, function (key, value) {

                if (value.IsResolved)

                    user.push(value);

            });

        }

        return users;

    }

In the above function you need to pass the people picker id which is get from the developer tool, which is like what am consider from above image.

If we know the user Email or Id we resolve them into people picker by the following way.

With the following function we can resolve or bind the users into the people picker. Here bind the users to people picker by their emails. We can also bind with their Id's also. The difference among those is just getting the users from REST call. For emails we use "getByEmail" , for Ids we use "getById". After getting the users we need to pass those user objects to people picker to resolve by following function.

function getUsersByEmails(usersEmails){

     var users=[];

     var webUrl="http:stage.test.com/mysite/";

     $.each(usersEmals,function(index,email){

         var resourceUrl=webUrl+"/_api/web/siteusers/getbyemail('" + email+ "')";

         getData(resourceUrl, function (data) {

                users.push(data.d);

            }, function(data){

               alert('Fail to get user');

        });

     });

     return users;

}

//Rest Call to get data from sharepoint

function getData(resourceUrl,success,failure){

           $.ajax({

                url: resourceUrl,

                method: "GET",

                async: false,

                headers: { "Accept": "application/json; odata=verbose" },

                success: function (data) {

                success(data);

            },

            error: function (data) {

                failure(data);

            }

        });

}

function bindUsersToPeoplePickerByEmails(peoplePickerId,users){

        var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePikcerId];

        $.each(users,function(index,user){

             var usrObj = { 'Key': user.Title};

             peoplePicker.AddUnresolvedUser(usrObj, true);

        });

}

With the above function we can resolve the users into people picker.

That's all. I hope this helps you. 

Thank you.