10

I want to build an autocomplete field in javascript (like the 'Person or Group' field in sharepoint library).

What is the best method to populate the field with suggestions ?

7

I have done this in 2010 using the ListData.svc and Kendo UI autocomplete. You use ListData.svc to get people from the UserInformationList, by default this will include groups. In my example I limit the query to Person. If you wanted to use the new REST API instead of the ListData.svc REST API you would just point your read operation to the new end-point.

var peopleDataSource = new kendo.data.DataSource({
                        type: "odata",
                        transport: {
                            read: function (options) {
                                return $.ajax({
                                    type: "GET",
                                    url: "../_vti_bin/ListData.svc/UserInformationList?$filter=ContentType eq 'Person'",
                                    dataType: "json",
                                    data: options.data
                                }).done(function (data, textStatus, jqXHR) {
                                    options.success(data);
                                }).fail(function (jqXHR, textStatus, errorThrown) {
                                    options.error(jqXHR);
                                });
                            }
                        }
                 });

Once you have the data source you would just template your control in the way you see fit. Here is mine:

enter image description here

After adding a few people:

enter image description here

I know this goes beyond the scope of the question but I have found the following controls useful:

Kendo DataSource, Kendo AutoComplete, Kendo ListView, Kendo MultiSelect.

  • Thanks for your reply. The problem is that the results of your query is not equal to the results from the field in the EditForm. It doesn't include groups and users I've created by myself. – user1132439 Jun 26 '13 at 5:20
  • 1
    I have found the the correct results comes from _vti_bin/client.svc/ProcessQuery request with a ClientPeoplePickerSearchUser action. I'm not sure I can use this method. – user1132439 Jun 26 '13 at 5:23
  • It's not the correct answer. The ProcessQuery needs cookies to work. I'm working on the answer then I will post it here. – user1132439 Jun 27 '13 at 5:27
6

The 'User/Group' field has two interesting metadata properties:

  1. SelectionMode = people only / people and groups
  2. SelectionGroup = group to filter the members

When searching for users, use the api url:

_api/web/siteusers?$select=Id,Title&$filter=startswith(Title, '{term}')

When searching for users in a group, use the api url:

_api/Web/SiteGroups/GetById({id})/users?$select=Id,Title&$filter=startswith(Title, '{term}')

Concat (if SelectionGroup > 0) the string

' and PrincipalType eq {principalType}'

to the url to filter by: 1 = user, 4 = security group (AD), 8 = sharepoint group (reference here)

  • Can you please post full source code for this, I am having trouble with the authentication to SP REST services.. Thanks – user23878 Feb 22 '14 at 1:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.