Using REST to create a dashboard from list data. Is there any way to add a people picker field to my page? I have limited access to our environment

Question

I am using REST to create a dashboard. I want users to be able to interact with the dashboard by assigning items to other users, etc. Is there a way to add a people picker so that they can look-up and validate users? I have limited access to the SP environment so i can't edit the page layout or masterpage. I am just inserting my script a Script Editor web part. I was thinking i could insert some sort of control from the 'toolbox' in SP Designer, but all toolbox options are grayed out for .js files apparently and i don't have access to edit site page files or page layouts. I'd like them to be able to use the native SharePoint people picker controls to select a person and then use REST to POST that person to a list column. Essentially, I want a people picker control inserted on the page via my javascript file. Any ideas would be greatly appreciated!

$(document).ready(function(){   
    getCategories("Test List")

});

function getCategories(listName){
    var userId = _spPageContextInfo.userId;
    var url = _spPageContextInfo.siteServerRelativeUrl+
        "/_api/lists/getbytitle('Test List')/items?$select=*,Author/Title&$expand=Author&$orderby=Created desc&$top=100";   
    $.ajax({
        url: url,
        method: 'GET',
        beforeSend: function (XMLHttpRequest){
            XMLHttpRequest.setRequestHeader('Accept', 'application/json; odata=verbose');
            },
        success: function( data ) {
                createHTML(data, listName);
        }   
    }); 
}

function createHTML(data, listName){
var arr = data.d.results;
var container = $('.dashboard');
 for(var i in arr){
        var item = arr[i];
        //console.log(title + " - " + item.CostSavings);     
        var title = item.Title;
        var status = item.Status ? item.Status : "Status Pending";
        var author = item.Author["Title"];
        var category = item.Category ? item.Category : "Uncategorized";

        categoryLinksContainer.append(
                '<div class="requestWrap">'+

                    //THIS IS WHERE I'D LIKE TO ADD A PEOPLE PICKER

                    '<div class="requestTitle">'+title+'</div>'+
                    '<div class="homeItemStatus">'+status+'</div>'+
                    '<div class="requestAuthor">Requestor: '+author+'</div>'+       
                    '<div style="display:none">'+category+'</div>'+
                '</div>'+
        );
                categoryLinksContainer.appendTo(container);     
  } 
}

Answer 1

You can use the client side people picker. The link talks about SharePoint add in but it will work in your scenario. Just make sure the .js files are loaded in the same order as is given.

https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/use-the-client-side-people-picker-control-in-sharepoint-hosted-sharepoint-add-in