How to recreate a people picker (or anything else that can autocomplete names)?

Question

I have a page on which I have a drop-down list with the names of all the groups that I created in SharePoint. When a user picks a group from that list, it will display extra information on the page such as group owner, group description, list of members and total amount of members. If the current user is the group owner, then an X is shown next to each member of the group. Upon clicking on an X next to a member, that member is removed from the group.

I want to add a feature where the group owner can also add members to the group. At the bottom of the list of names I added a link saying "add a member to this group" and when the group owner clicks on that, it should show a people picker.
Could anyone get me in the right direction as to how to recreate a people picker functionality?

It doesn't necessarily need to be the default people picker as we see it in SharePoint, it can be as simple as an input field that has the ability to see which name you're typing in and as you type it will give you suggestions (at the bottom of the input field, just like how the people picker gives you suggestions). So basically I'm trying to make something that has more or less the same functionality as a people picker. All it really needs to be able to do is fetch a list of all users and as you type the name of a user, show suggestions that resemble the name you've been typing. I'd like to be able to do all this using JavaScript and/ SPServices.

Any help would be greatly appreciated!

Answer 1

You could use clientpeoplepicker.js. Here is a simple example on how to use it:

if (LoadSodByKey('clientpeoplepicker.js', null) == Sods.missing)
{
    RegisterSod('clientpeoplepicker.js', '/_layouts/15/clientpeoplepicker.js');
}
if (LoadSodByKey('clientforms.js', null) == Sods.missing)
{
    RegisterSod('clientforms.js', '/_layouts/15/clientforms.js');
}
if (LoadSodByKey('clienttemplates.js', null) == Sods.missing)
{
    RegisterSod('clienttemplates.js', '/_layouts/15/clienttemplates.js');
}
if (LoadSodByKey('autofill.js', null) == Sods.missing)
{
    RegisterSod('autofill.js', '/_layouts/15/autofill.js');
}


SP.SOD.loadMultiple(['autofill.js', 'clienttemplates.js', 'clientforms.js', 'clientpeoplepicker.js'], function() { 

    $("<div/>", {id:"peoplePickerDiv"}).appendTo("#part1");


    var schema = {};
            schema['PrincipalAccountType'] = 'User';
            schema['SearchPrincipalSource'] = 15;
            schema['ResolvePrincipalSource'] = 15;
            schema['AllowMultipleValues'] = false;
            schema['MaximumEntitySuggestions'] = 50;
            schema['Width'] = '280px';

            var users = new Array(1);
            var user = new Object();
            user.AutoFillDisplayText = _spPageContextInfo.userLoginName;
            user.AutoFillKey = "i:0#.f|membership|" + _spPageContextInfo.userLoginName;
            user.AutoFillSubDisplayText = "";
            user.AutoFillTitleText = _spPageContextInfo.userLoginName;
            user.Description = _spPageContextInfo.userLoginName;
            user.DisplayText = _spPageContextInfo.userLoginName;
            user.EntityType = "User";
            user.IsResolved = true;
            user.Key = "i:0#.f|membership|" + _spPageContextInfo.userLoginName;
            user.ProviderDisplayName = "Tenant";
            user.ProviderName = "Tenant";
            user.Resolved = true;
            users[0] = user;

            SPClientPeoplePicker_InitStandaloneControlWrapper("peoplePickerDiv", users, schema);

});

For more information on MSDN

Answer 2

I created a PeoplePicker widget a while back to fulfill this same need. You can read about it here:

http://purtuga.github.io/SPWidgets/

Look at the PeoplePicker. It's part of a suite of widgets I use for client side customizations. You can also download the demo aspx page if you just want to try it out in your sharepoint:

https://github.com/purtuga/SPWidgets/blob/master/demo/demo.about.md#spwidgets-demo