SharePoint custom html form input autocomplete users

SharePoint expose a lot of API. SP REST API reference and samples

The more you know them it's will be easy develop a lot of features

So in our tutorial we will be use   this api "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";

to make ajax call and retrieve list of users by param input

1.       first we added a reference to jQuery and jQuery UI library in our page

2.       our html form will be look like this

<div id="my-custom-form">

<input type="text" id="emplyeeName" />

</div>

 

3.       JS – our script looks like this

<script>

// user picker auto complete rest api

function searchUsers(request, response) {

 

    var qURL = _spPageContextInfo.siteAbsoluteUrl + "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";

    var principalType = this.element[0].getAttribute('principalType');

    $.ajax({

        'url': qURL,

        'method': 'POST',

        'data': JSON.stringify({

            'queryParams': {

                '__metadata': {

                    'type': 'SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters'

                },

                'AllowEmailAddresses': true,

                'AllowMultipleEntities': false,

                'AllUrlZones': false,

                'MaximumEntitySuggestions': 20,

                'PrincipalSource': 15,

                'PrincipalType': 15,

                'QueryString': request.term,

                'Required': false

 

 

 

            }

        }),

        'headers': {

            'accept': 'application/json;odata=verbose',

            'content-type': 'application/json;odata=verbose',

            'X-RequestDigest': $("#__REQUESTDIGEST").val()

        },

        '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} 

                    return {

                        label: item.DisplayText,

                        value: item.Key.replace("i:0#.w|domain\\", "")

                    }

                }));

            }

        },

        'error': function (err) {

            if (err.responseJSON.error.code = "-2130575252, Microsoft.SharePoint.SPException")

                RefreshRequestDigist();

            else

                alert(JSON.stringify(err));

        }

    });

}

$(document).ready(function(){

    $("#emplyeeName").autocomplete({

        source: searchUsers,

        minLength: 2,

        select: function (event, ui) {

            var label = ui.item.label;

            var value = ui.item.value;

            $("#emplyeeName").val(ui.item.label);

 

            return false;

        }

    });

});

</script>