How to create people picker using jquery [duplicate]

Question

This question already has an answer here:

• Using Client Side People Picker in SharePoint Page Not App 2 answers

How to create people picker in sandbox solutions using jquery?

I need design part also. Any idea?

Answer 1

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'));
   });
}