Auto-Complete People Picker In SharePoint Using Angular And jQuery

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’.

Then, the created list looks as below.


Step2

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

HTML code

Result

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

Finally, the overall code looks like below.

CODE

Let’s see the results on screen,

Auto-complete

Pick the user from the input element and click Submit.

Go back to the SharePoint list.

Conclusion

This will be useful when someone wants to work on the People Picker column or to get the list of all the site's members.