Post
Ask Question

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

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 

  1. <body ng-app="myApp" ng-controller="MainCtrl">  
  2. <label for="tags">Assigned To: </label>  
  3.   <input id="Persons" ng-model="SelectedPerson"/><br/><br/>  
  4.   <input type="button" ng-click="AddToList()" value="Submit"/>  
  5. </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++) {    
    13.   
    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.                     }   
    17.       
    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

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

Finally, the overall code looks like below.

CODE

  1. <html>  
  2.    <head>  
  3.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4.       <title>AutocompleteByAJS</title>  
  5.       <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>  
  6.       <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"/>  
  7.       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>  
  8.       <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
  9.       <script src="https://code.angularjs.org/1.3.0/angular.js"></script>  
  10.    </head>  
  11.    <body ng-app="myApp" ng-controller="MainCtrl">  
  12.       <label for="tags">Assigned To: </label>  
  13.       <input id="Persons" ng-model="SelectedPerson"/><br/><br/>  
  14.       <input type="button" ng-click="AddToList()" value="Submit"/>  
  15.    </body>  
  16.   
  17.    <script type="text/javascript">  
  18.       var app = angular.module('myApp', []);  
  19.       var peoplePickerUsers =[];  
  20.       var AllpeoplePickerUsers =[];  
  21.       var CurPersonId  
  22.       var listName="SampleListforAutocomplete";  
  23.       app.controller('MainCtrl',function($scope,$http) {  
  24.       $.ajax    
  25.               ({    
  26.               url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/siteusers",  
  27.               type: "GET",    
  28.               headers:    
  29.               {    
  30.                   "Accept": "application/json;odata=verbose"    
  31.               },    
  32.               success: function(data)    
  33.               {    
  34.                 AllpeoplePickerUsers = data.d.results;  
  35.                 console.log(AllpeoplePickerUsers);  
  36.                 for (var i = 0; i < AllpeoplePickerUsers.length; i++) {    
  37.         
  38.                               var property = AllpeoplePickerUsers[i].Title;    
  39.                               peoplePickerUsers.push(property);  
  40.                           }   
  41.             
  42.                       },    
  43.               error: function(error)    
  44.               {    
  45.                   alert(JSON.stringify(error));  
  46.               }    
  47.           });  
  48.         
  49.       $( function() {  
  50.           $( "#Persons" ).autocomplete({  
  51.             source: peoplePickerUsers  
  52.           });  
  53.         } );  
  54.       $scope.AddToList=function(){  
  55.       for(var i=0;i<AllpeoplePickerUsers.length;i++){  
  56.            if ($scope.SelectedPerson=== AllpeoplePickerUsers[i].Title)   
  57.               {  
  58.                   CurPersonId=AllpeoplePickerUsers[i].Id;  
  59.               }  
  60.            }  
  61.        var datavalue = "{__metadata:{'type':'SP.Data."+listName+"ListItem'},AssigningToId:'"+CurPersonId+"'}";  
  62.       // alert(datavalue);  
  63.       $http({  
  64.               url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('"+listName+"')/items",  
  65.               method: "POST",  
  66.               headers:    
  67.               {    
  68.                   "Accept": "application/json;odata=verbose",   
  69.                   "Content-Type": "application/json;odata=verbose",    
  70.                   "X-RequestDigest": $("#__REQUESTDIGEST").val(),    
  71.                   "X-HTTP-Method": "POST"    
  72.               },  
  73.               data: datavalue   
  74.                   })  
  75.           .then(function(response) {  
  76.                   alert("success");  
  77.           },   
  78.           function(response) {   
  79.                   alert("failed");  
  80.           });  
  81.           }  
  82.       });  
  83.    </script>  
  84. </html>  

Let’s see the results on screen,

Auto-complete

SharePoint
Pick the user from the input element and click Submit.

 SharePoint

Go back to the SharePoint list.

SharePoint

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.


Similar Articles