Custom People Picker in Sharepoint 2013 Online

Sharepoint 2013 introduced new elegant people picker out of the box. You can take a look at it when you click "Share" link in the header of your site. Once you start typing user name in the textbox, the search results show up immediately in the list below.

This picker consolidates user and group entries from AD as well as Sharepoint site. Very convenient!

Ever wondered if you can build your own custom people picker using the same functionality. Yes, you can!

All you need is a textbox and a few lines of JavaScript code.

You also need to include JQuery and JQuery UI libraries somewhere on your page.


Let's start with the text box:
 

<input ID="txtPeoplePicker" class="people" type="text"/>

 
Next, this textbox needs to be converted to autocomplete box using JQuery UI:

 

<script type="text/javascript" language="javascript">       $(document).ready(function () {                 $(".people").autocomplete({               source: PeoplePickerSource,             minLength: 2           });     });    </script>

 

As you can see, parameter "source" is a function PeoplePickerSource that is called by JQuery autocomplete  plug-in to retrieve data from the Sharepoint people picker web service. This function is defined in the following JS file:
 

function PeoplePickerSource ( request, response ) {     $.ajax({         url: "/_vti_bin/client.svc/ProcessQuery",         dataType: "json",         type: "POST",         data: peoplePickerXML(request.term),         headers: {             "Accept": "*/*",             "Content-Type": "text/xml",             "X-RequestDigest": $("#__REQUESTDIGEST").val()         },         success: function (data) {               response($.map(JSON.parse(data[2]), function (item) {                 return {                     label: item.DisplayText,                     value: item.DisplayText                 }             }));           },         error: function (data) {                          console.log(data.responseText);         }     }); }         function peoplePickerXML(search) {       return '<Request xmlns="http://schemas.microsoft.com/sharepoint/clientquery/2009" SchemaVersion="15.0.0.0" LibraryVersion="15.0.0.0" ApplicationName="Javascript Library">' +     '<Actions><StaticMethod TypeId="{de2db963-8bab-4fb4-8a58-611aebc5254b}" Name="ClientPeoplePickerSearchUser" Id="0">' +     '<Parameters><Parameter TypeId="{ac9358c6-e9b1-4514-bf6e-106acbfb19ce}">' +     '<Property Name="AllowEmailAddresses" Type="Boolean">false</Property>' +     '<Property Name="AllowMultipleEntities" Type="Boolean">true</Property>' +     '<Property Name="AllUrlZones" Type="Boolean">false</Property>' +     '<Property Name="EnabledClaimProviders" Type="Null" />' +     '<Property Name="ForceClaims" Type="Boolean">false</Property>' +     '<Property Name="MaximumEntitySuggestions" Type="Number">30</Property>' +     '<Property Name="PrincipalSource" Type="Number">15</Property>' +     '<Property Name="PrincipalType" Type="Number">13</Property>' +     '<Property Name="QueryString" Type="String">' + search + '</Property>' +     '<Property Name="Required" Type="Boolean">true</Property>' +     '<Property Name="SharePointGroupID" Type="Number">0</Property>' +     '<Property Name="UrlZone" Type="Number">0</Property>' +     '<Property Name="UrlZoneSpecified" Type="Boolean">false</Property>' +     '<Property Name="Web" Type="Null" />' +     '<Property Name="WebApplicationID" Type="String">{00000000-0000-0000-0000-000000000000}</Property>' +     '</Parameter></Parameters></StaticMethod></Actions><ObjectPaths /></Request>';   }

 Funstion peoplePickerXML provides XML payload to the web service and among other parameters, specifies search string.

Once everything is linked together on the page, you will get your custom autocomplete people picker.

That is all folks! Enjoy!