People Picker Field Resolve In SharePoint 2013 (ClientPeoplePicker) Using REST APi And jQuery

This blog will help you to resolve the Custom People Picker field to fetch the user details in the text box, using REST API and jQuery.

The good news is that you can implement your own people picker, using the “_api/SP.UI.ApplicationPages.

ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser” endpoint along with jQuery-UI.

It does not require to load any Dependent JS files and makes it very easy to implement multiple people pickers. 

<script>
$(document).ready(function () {
    $("#PeoplePickerinptbox").autocomplete({
        source: search,
        minLength: 2
    });

});

function search(request,response) {
    var appweburl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));
    var hostweburl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));

    var sourceURL = appweburl + "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";
    var principalType = this.element[0].getAttribute('principalType');
    $.ajax(
    {
        'url':sourceURL,
        'method':'POST',
        'data':JSON.stringify({
            'queryParams':{
                '__metadata':{
                    'type':'SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters'
                },
                'AllowEmailAddresses':true,
                'AllowMultipleEntities':false,
                'AllUrlZones':false,
                'MaximumEntitySuggestions':50,
                'PrincipalSource':15,
                'PrincipalType': principalType,
                'QueryString':request.term
                'Required':false

            }
        }),
        'headers':{
            'accept':'application/json;odata=verbose',
            'content-type':'application/json;odata=verbose',
            'X-RequestDigest':requestDigest
        },
        'success':function (data) {
            var d = data;
            var results = JSON.parse(data.d.ClientPeoplePickerSearchUser);
            if (results.length > 0) {
                response($.map(results, function (item) {
                    return {label:item.DisplayText,value:item.DisplayText}
                }));
            }
        },
        'error':function (err) {
            alert(JSON.stringify(err));
        }
    }
  );


}

</script>

Was my blog helpful?

If so, please let us know at the bottom of this page. If not, let us know what was confusing or missing and I’ll use your feedback to double-check the facts, add info and update this blog.