How to create people picker in sandbox solutions using jquery?
I need design part also. Any idea?
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It only takes a minute to sign up.
Sign up to join this communityHow to create people picker in sandbox solutions using jquery?
I need design part also. Any idea?
Create custom People picker.
Using jQuery, Select2, Bootstrap, SharePoint REST API
<script type="text/javascript" src="../Scripts/libs/select2/select2.min.js"></script>
<!-- Select2 CSS -->
<link rel="Stylesheet" type="text/css" href="../Scripts/libs/select2/select2.css" />
<link rel="Stylesheet" type="text/css" href="../Scripts/libs/select2/select2-bootstrap.css" />
function SetCustomPeoplePicker() {
$("#peoplePickerDiv").select2({
placeholder: "Search for a person",
minimumInputLength: 3,
ajax: {
url: $.QueryString["SPAppWebUrl"] + "/_api/web/siteusers",
dataType: "json",
data: function (term, page) {
return {
"$filter": "substringof('" + term + "', Title)"
};
},
results: function (data, page) {
return { results: data.d.results };
},
params: {
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
},
id: function (person) { return { id: person.Id }; },
formatResult: function (person) {
return person.Title;
},
formatSelection: function (person) {
return person.Title;
},
formatNoMatches: function () {
return "No people found. (Case Sensitive)";
},
escapeMarkup: function (m) { return m; },
dropdownCssClass: "bigdrop"
}).on('change', function (e) {
// Access to full data
console.log($(this).select2('data'));
});
}