Auto-Complete People Picker In SharePoint Using Angular And jQuery

Mahipal Reddy
Oct 06, 2017
4.6k
0
1
Article

Introduction

This article will help beginner and developers who want to work with AngularJS and jQuery for People Picker columns.

Objective

Post a "Person" and "Group" column in SharePoint list with autocomplete input of HTML using Angular.js and jQuery with REST call.

Step 1

Create a SharePoint list with a single person and group column as shown below. Keep ‘Allow multiple selections:’ as ‘No’.

SharePoint

Then, the created list looks as below.

SharePoint
Step2

Create a page in SharePoint and include a content editor with the following HTML.

HTML code

<body ng-app="myApp" ng-controller="MainCtrl">
<label for="tags">Assigned To: </label>
<input id="Persons" ng-model="SelectedPerson"/><br/><br/>
<input type="button" ng-click="AddToList()" value="Submit"/>
</body>

Result

SharePoint

Step 3

Build a script for autocomplete input.

We have mainly 3 steps to build the script as follows.

Function for getting all the people from SharePoint site on page load.

Code
1. $.ajax
2. ({
3. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/siteusers",/*Get all the peoples from the site*/
4. type: "GET",
5. headers:
6. {
7. "Accept": "application/json;odata=verbose"
8. },
9. success: function(data)
10. {
11. AllpeoplePickerUsers = data.d.results; /*set the all peoples with all their properties to a global variable*/
12. for (var i = 0; i < AllpeoplePickerUsers.length; i++) {
14. var property = AllpeoplePickerUsers[i].Title;
15. peoplePickerUsers.push(property); /*splitting the all titles to another global variable to display names in auto-complete input*/
16. }
18. },
19. error: function(error)
20. {
21. alert(JSON.stringify(error));
22. }
23. });

Link the people to autocomplete-input on page load itself.

Code
1. $( function() {
2. $( "#Persons" ).autocomplete({/* setting the all names to the autocomplete input using Id*/
3. source: peoplePickerUsers/* peoplePickerUsers contains the names of site peoples*/
4. });
5. } );

Then, submit the selected person to the SharePoint list on button click.

Code
1. $scope.AddToList=function(){ /*On-click function*/
2. for(var i=0;i<AllpeoplePickerUsers.length;i++){/*Since we have name in input, so we are passing the respected user id here*/
3. if ($scope.SelectedPerson=== AllpeoplePickerUsers[i].Title) /*$scope.SelectedPerson is selected name from html input*/
4. {
5. CurPersonId=AllpeoplePickerUsers[i].Id;/*Setting Id to a global variable*/
6. }
7. }
8. var datavalue = "{__metadata:{'type':'SP.Data."+listName+"ListItem'},AssigningToId:'"+CurPersonId+"'}";/*Add Id to column name like AssigningTo+Id and Building the body of data to post to the SharePoint list*/
9. $http({
10. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('"+listName+"')/items",
11. method: "POST",
12. headers:
13. {
14. "Accept": "application/json;odata=verbose",
15. "Content-Type": "application/json;odata=verbose",
16. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
17. "X-HTTP-Method": "POST"
18. },
19. data: datavalue /* passing the body of data here*/
20. })
21. .then(function(response) {
22. alert("success");
23. },
24. function(response) {
25. alert("failed");
26. });
27. }

Step 4

Include the following jQuery and Angular.js references in the page header.

References

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>

Finally, the overall code looks like below.

CODE

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AutocompleteByAJS</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<label for="tags">Assigned To: </label>
<input id="Persons" ng-model="SelectedPerson"/><br/><br/>
<input type="button" ng-click="AddToList()" value="Submit"/>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
var peoplePickerUsers =[];
var AllpeoplePickerUsers =[];
var CurPersonId
var listName="SampleListforAutocomplete";
app.controller('MainCtrl',function($scope,$http) {
$.ajax
({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/siteusers",
type: "GET",
headers:
{
"Accept": "application/json;odata=verbose"
},
success: function(data)
{
AllpeoplePickerUsers = data.d.results;
console.log(AllpeoplePickerUsers);
for (var i = 0; i < AllpeoplePickerUsers.length; i++) {
var property = AllpeoplePickerUsers[i].Title;
peoplePickerUsers.push(property);
}
},
error: function(error)
{
alert(JSON.stringify(error));
}
});
$( function() {
$( "#Persons" ).autocomplete({
source: peoplePickerUsers
});
} );
$scope.AddToList=function(){
for(var i=0;i<AllpeoplePickerUsers.length;i++){
if ($scope.SelectedPerson=== AllpeoplePickerUsers[i].Title)
{
CurPersonId=AllpeoplePickerUsers[i].Id;
}
}
var datavalue = "{__metadata:{'type':'SP.Data."+listName+"ListItem'},AssigningToId:'"+CurPersonId+"'}";
// alert(datavalue);
$http({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('"+listName+"')/items",
method: "POST",
headers:
{
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "POST"
},
data: datavalue
})
.then(function(response) {
alert("success");
},
function(response) {
alert("failed");
});
}
});
</script>
</html>