Below are the JS files required to load for client side people picker using JSOM.
- clienttemplates.js
- clientforms.js
- clientpeoplepicker.js
- autofill.js
- sp.js
- sp.runtime.js
- sp.core.js
Please put below html in HTML file
<div id="peoplePickerDiv"></div>
Please put below code in JS file.
// Run your custom code when the DOM is ready.
$(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'] = true;
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);
}