Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

Is there a way to trigger a JS function when a People picker completes and finds a user? I'm developing a SharePoint 2013 app using client side development pattern.

Thanks for your suggestion Per, I have tried adding the OnUserResolvedClientScript into the control as follows but its not working, not sure if I can add it in this way?

// First we need to get the selected user from the person selected in the people picker
$(document).ready(function () {

// Specify the unique ID of the DOM element where the
// picker will render.
initializePeoplePicker('employeePickerSpan');});

// 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['OnUserResolvedClientScript'] = 'MyPickerUserResolved';
schema['Width'] = '250px';

// 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);

}

function MyPickerUserResolved(topElementId,  MyPickerUserResolvedusers) {
// users is set to GetAllUserInfo()
// Get the people picker object from the page.
var employeePicker =    this.SPClientPeoplePicker.SPClientPeoplePickerDict.employeePickerSpan_TopSpan;

// Get information about all employees.
var employees = employeePicker.GetAllUserInfo();
var employeeInfo = '';
for (var i = 0; i < employees.length; i++) {
    var employee = employees[i];
    for (var employeeProperty in employee) {
        employeeInfo += employeeProperty + ':  ' + employee[employeeProperty] + '<br>';
    }
}
$('#employeelineManager').html(employeeInfo);
}
share|improve this question

2 Answers 2

up vote 4 down vote accepted

On creation of the ClientPeoplePicker you can set the OnUserResolvedClientScript property to a function like:

function MyPickerUserResolved (topElementId, users) { 
    // users is set to GetAllUserInfo()
} 
share|improve this answer
    
Thanks Per, managed to work out the following based on your post...<span id="employeePickerSpan" onmouseout="MyPickerUserResolved()" /> seems to work the way i need it! –  Stephen Feb 18 '13 at 13:11
    
actually i opted out of the mouseout, slowed the page down way too much, Per's solution worked great. –  Stephen Jan 14 at 10:15

You could use some jQuery to identify when the field on the page changes. The DIV for the people picker will have plain text for items not yet checked (i.e. if you typed a name, but didn't hit check names) and a span for each item that it has checked.

Here are some examples of how to monitor a DIV like that: http://stackoverflow.com/questions/4979738/fire-jquery-event-on-div-change

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.