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>
