SharePoint custom html form input autocomplete users

SharePoint expose a lot of API. SP REST API reference and samples

The more you know them it's will be easy develop a lot of features

So in our tutorial we will be use   this api "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";

to make ajax call and retrieve list of users by param input

1.       first we added a reference to jQuery and jQuery UI library in our page

2.       our html form will be look like this

<div id="my-custom-form">

<input type="text" id="emplyeeName" />

</div>

 

3.       JS – our script looks like this

<script>

// user picker auto complete rest api

function searchUsers(request, response) {

 

    var qURL = _spPageContextInfo.siteAbsoluteUrl + "/_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser";

    var principalType = this.element[0].getAttribute('principalType');

    $.ajax({

        'url': qURL,

        'method': 'POST',

        'data': JSON.stringify({

            'queryParams': {

                '__metadata': {

                    'type': 'SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters'

                },

                'AllowEmailAddresses': true,

                'AllowMultipleEntities': false,

                'AllUrlZones': false,

                'MaximumEntitySuggestions': 20,

                'PrincipalSource': 15,

                'PrincipalType': 15,

                'QueryString': request.term,

                'Required': false

 

 

 

            }

        }),

        'headers': {

            'accept': 'application/json;odata=verbose',

            'content-type': 'application/json;odata=verbose',

            'X-RequestDigest': $("#__REQUESTDIGEST").val()

        },

        'success': function (data) {

            var d = data;

            var results = JSON.parse(data.d.ClientPeoplePickerSearchUser);

            if (results.length > 0) {

                response($.map(results, function (item) {

                    //  return {label:item.DisplayText,value:item.DisplayText} 

                    return {

                        label: item.DisplayText,

                        value: item.Key.replace("i:0#.w|domain\\", "")

                    }

                }));

            }

        },

        'error': function (err) {

            if (err.responseJSON.error.code = "-2130575252, Microsoft.SharePoint.SPException")

                RefreshRequestDigist();

            else

                alert(JSON.stringify(err));

        }

    });

}

$(document).ready(function(){

    $("#emplyeeName").autocomplete({

        source: searchUsers,

        minLength: 2,

        select: function (event, ui) {

            var label = ui.item.label;

            var value = ui.item.value;

            $("#emplyeeName").val(ui.item.label);

 

            return false;

        }

    });

});

</script>

SharePoint List Rendering with VUE.JS Ajax call

When we using in client side developing is not matter what version of SharePoint it will work in all version of SharePoint.

Steps:

1.       Create SP list with Name "Test"

2.       Add some data to list

3.       For the example I have only title column

 

Now after creating the list we will write some code

1.       Create a folder in your workspace with name ex "vue-demo-sp-list"

2.       Inside the folder create a html file "index.html"

3.       Open the file with editor (vs-code,notpad++)

4.       Copy the code below

 

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<div id="app">

                <table class="table">

                                <thead>

                                                <tr>

                                                                <th>Title</th>

                                                </tr>

                                </thead>

                                <tbody>

                                                <tr v-for="item in items">

                                                                <td>{{item.title}}

                                                                </td>

                                                </tr>

                                </tbody>

                </table>

</div>

 

<script>

const app = new Vue({

    el: '#app',

                data() {

                                return {

                                                items:[]

                                                }

                                },

                created: function () {

                                    this.getTestList();                                       

                                },

                methods: {

                                getTestList:function() {

                                 

                                  var that = this;

 

            var endPointUrl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbyTitle('Test')/items";

            var headers = {

                "accept": "application/json;odata=verbose"

            };

            $.ajax({

                url: endPointUrl,

                type: "GET",

                headers: headers,

                success: function (data, status, xhr) {

                    that.items = data.d.results;

                    //alert('Success');

                },

                error: function (xhr, status, error) {

 

                   console.log("error",xhr);

 

                }

            });

        },

                                }

                });

</script>

 

5.       upload to sharepoint assets folder create folder for the project

6.       add content editor webpart in some page and put the link to the file "index.html""

DEMO

Title
{{item.title}}