Reset-Set-validate-Resolve Sharepoint people picker By javascript

SharePoint 2010 people picker is a very useful control to be used on your custom forms or custom visual webparts to select people within your corporate .

Some of the clients requirements would specify to preload  this field with some values by default as the current logged in user , ok what about doing this in the client side , Now everyone is going towards the client side operations , we do not want to exhaust the server those operations.

People picker could be handled by javascript methods:

To Reset  the people picker value you could use:

   1:  function ResetPP() {

   2:          var identifier = '<%= PeoplePicker.ClientID%>';

   3:          var value = '';

   4:          var tags = document.getElementsByTagName('DIV');

   5:   

   6:          for (var i = 0; i < tags.length; i++) {

   7:              var tempString = tags[i].id;

   8:              if ((tempString.startsWith(identifier)) && (tempString.indexOf('_upLevelDiv') > 0)) {

   9:                  tags[i].innerHTML = value;

  10:                  break;

  11:              }

  12:          }

  13:      }

To Set the People Picker with a certain value:
to use it something like :

   1:  SetPP('<%=PeoplePicker.ClientID%>', 'sps\administrator');

The Method:

   1:  function SetPP(identifier ,value) {

   2:   

   3:          var tags = document.getElementsByTagName('DIV');

   4:   

   5:          for (var i = 0; i < tags.length; i++) {

   6:              var tempString = tags[i].id;

   7:              if ((tempString.startsWith(identifier)) && (tempString.indexOf('_upLevelDiv') > 0)) {

   8:                  tags[i].innerHTML = value;

   9:                  break;

  10:              }

  11:          }

  12:      }

Find if the People Picker is resolved:

   1:  function IsPeoplePickerValueResolved() {

   2:          var eEntityData = $("div[id='divEntityData']");

   3:          if (eEntityData.length > 0) {

   4:              var isResolved = eEntityData.attr("isresolved");

   5:              return (isResolved == "True");

   6:          }

   7:          return false;

   8:      }

Validate the People Picker:

   1:  function ValidateOwner(PeoplePickerOwner, PeoplePickerContextName) {

   2:          if (!ValidatePickerControl(PeoplePickerOwner.id)) {

   3:              ShowValidationError();

   4:              return false;

   5:          }

   6:          var arg = getUplevel(PeoplePickerOwner.id);

   7:          var ctx = PeoplePickerOwner.id;

   8:          EntityEditorSetWaitCursor(ctx);

   9:          WebForm_DoCallback(PeoplePickerContextName, arg, EntityEditorHandleCheckNameResult, ctx, EntityEditorHandleCheckNameError, true);

  10:          return false;

  11:      }

To use this method you can use the following:

   1:  var PeoplePickerOwner = document.getElementById('<%= PeoplePicker.ClientID %>');

   2:  var PeoplePickerOwnerHiddenSpanData = document.getElementById('<%= PeoplePickerOwner.ClientID + "_hiddenSpanData"%>');

   3:  var PeoplePickerContextName = $("#" + PeoplePickerOwnerHiddenSpanData.id).attr("name").replace("$hiddenSpanData", "");

   4:   

   5:  ValidateOwner(PeoplePickerOwner, PeoplePickerContextName);

To call the "Click" the check names button:

   1:  function ClickCheckName() {

   2:          document.getElementById('<%=PeoplePicker.ClientID%>' + "_checkNames").click();

   3:      }