Get values from Sharepoint ClientPeoplePicker using JQuery

Question

How do I get value from ClientPeoplePicker using JQuery. I have tried below code, but not getting the results.

function getPickerInputElement(identifier) {
    var tags = document.getElementsByTagName(‘DIV’);
    for (var i=0; i < tags.length; i++) {
        var tempString = tags[i].id;
        if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf(‘UserField_upLevelDiv’) > 0)){
            var innerSpans = tags[i].getElementsByTagName(“SPAN”);
            for(var j=0; j < innerSpans.length; j++) {
                if(innerSpans[j].id == ‘content’) {
                    return innerSpans[j].innerHTML;
                }
            }
        }
    }
    return null;
}

Answer 1

Try

var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
var users = peoplePicker.GetAllUserInfo();
for (var i = 0; i < users.length; i++) {
    alert(user.DisplayText);        
}

Answer 2

With this code you can get every picker's value:

var ClientPickerDict = SPClientPeoplePicker.SPClientPeoplePickerDict;
for (var propertyName in ClientPickerDict) {
    console.log(ClientPickerDict[propertyName].GetAllUserInfo());
}

Here is an utility function i use - but you need to know the id.

GetPeoplePickerValue: function (elementID) {
    /// <summary>
    ///  //returns a object with all users and their informations
    /// </summary>
    /// <param name="elementID">peoplepicker ID</param>
    var toSpanKey = elementID + "_TopSpan";
    var peoplePicker = null;

    // Get the people picker object from the page.
    var ClientPickerDict = SPClientPeoplePicker.SPClientPeoplePickerDict;
    for (var propertyName in ClientPickerDict) {
        if (propertyName == toSpanKey) {
            peoplePicker = ClientPickerDict[propertyName];
            break;
        }
    }
    if (peoplePicker != null) {
        // return information about all users.
        return peoplePicker.GetAllUserInfo();
    }
    else
        return '';
}'

Answer 3

Here are two methods:

This one uses spservices. spservices looks at the peoplepicker object and fetches back a little chart full of all the user data; you then use a little bit of DOM navigation on that chart to fetch the info you want:

var pp = $().SPServices.SPFindPeoplePicker({  peoplePickerDisplayName: whatDisplayName }).row.find("span[class='ms-entity-resolved']").attr("title");   

This one is just plain jquery (which is alot easier):

var pp = $("div[title='People Picker']").text().trim();