SharePoint People Picker using “clientpeoplepicker.js” or client side scripting

 <script src="/_layouts/15/SP.RequestExecutor.js"></script>  
 <script src="/_layouts/15/clienttemplates.js"></script>  
 <script src="/_layouts/15/clientforms.js"></script>  
 <script src="/_layouts/15/clientpeoplepicker.js"></script>  
 <script src="/_layouts/15/autofill.js"></script>  
 <script src="/_layouts/15/js"></script>  
 <script src="/_layouts/15/runtime.js"></script>  
 <script src="/_layouts/15/sp.core.js"></script>  
 <script type="text/javascript">  
   $(document).ready(function () {  
     // Specify the unique ID of the DOM element where the  
     // picker will render.  
     initializePeoplePicker('peoplePickerDiv');  
   });  
   // Render and initialize the client-side People Picker.  
   function initializePeoplePicker(peoplePickerElementId) {  
     // Create a schema to store picker properties, and set the properties.  
     var schema = {};  
     schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';  
     schema['SearchPrincipalSource'] = 15;  
     schema['ResolvePrincipalSource'] = 15;  
     schema['AllowMultipleValues'] = false;  
     schema['MaximumEntitySuggestions'] = 50;  
     schema['Width'] = '280px';  
     // Render and initialize the picker.  
     // Pass the ID of the DOM element that contains the picker, an array of initial  
     // PickerEntity objects to set the picker value, and a schema that defines  
     // picker properties.  
     this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);  
     alert('init end')  
   }  
   // Query the picker for user information.  
   function getUserInfo() {  
     // Get the people picker object from the page.  
     var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;  
     // Get information about all users.  
     var users = peoplePicker.GetAllUserInfo();  
     var userInfo = '';  
     for (var i = 0; i < users.length; i++) {  
       var user = users[i];  
       for (var userProperty in user) {  
         userInfo += userProperty + ': ' + user[userProperty] + '<br>';  
       }  
     }  
     $('#resolvedUsers').html(userInfo);  
     // Get user keys.  
     var keys = peoplePicker.GetAllUserKeys();  
     $('#userKeys').html(keys);  
     // Get the first user's ID by using the login name.  
     getUserId(users[0].Key);  
   }  
   // Get the user ID.  
   function getUserId(loginName) {  
     var context = new SP.ClientContext.get_current();  
     this.user = context.get_web().ensureUser(loginName);  
     context.load(this.user);  
     context.executeQueryAsync(  
        Function.createDelegate(null, ensureUserSuccess),  
        Function.createDelegate(null, onFail)  
     );  
   }  
   function ensureUserSuccess() {  
     $('#userId').html(this.user.get_id());  
   }  
   function onFail(sender, args) {  
     alert('Query failed. Error: ' + args.get_message());  
   }  
 </script>  
 <div id="peoplePickerDiv"></div>  
 <div>  
   <br />  
   <input type="button" value="Get User Info" onclick="getUserInfo()" />  
   <br />  
   <h1>User info:</h1>  
   <p id="resolvedUsers"></p>  
   <h1>User keys:</h1>  
   <p id="userKeys"></p>  
   <h1>User ID:</h1>  
   <p id="userId"></p>  
 </div>