How to Create a Multiple People Picker field in a HTML form using JQuery

Question

I want to create a People picker field in a HTML Form, which should accepts multiple people names, with comma or semicolon separated,

Usually I create a input text field in the HTML form and then using JQuery I convert it to a people picker

Here is the code I have used for single people picker:

     $("#name").autocomplete({
         source: search,
         minLength: 1
     });

in the same way I want to know how to add multiple people picker.

Also I want to know how to save them in the list using REST API.

Answer 1

You can use Client Side people picker in your custom HTML form.

Check below official documentation by Microsoft for same (Check for JavaScript code):

Use the client-side People Picker control in SharePoint-hosted SharePoint Add-ins.

Also check below article for Step by Step guide:

Client Side People Picker In SharePoint 2013.

To Save Multiple Users in Person or Group field using REST API:

First of all you have to Allow multiple selections in Person or Group(Say AssignedTo) column.

To add/update multi valued Person or Group column, you have to specify the ID's of the Persons or Groups like

var data = {
    __metadata: { "type": "SP.Data.TestListItem" },
    Title: "Some title",
    AssignedToId: { 'results': [11,22] } 
}

You will find more in this CRUD Operation to List Using SharePoint 2013 Rest API