People picker functional in Sharepoint 2013. How to use check names?

Question

Been playing around with some Sharepoint 2013 stuff. Made my custom form to user can fill some credentials.

My problem is that I want to use that CheckNames thing functional on my client side.

This is form part which handles stuff

 <td style="width:90%;" valign="top">
    <table border="0" cellpadding="0" cellspacing="0" style="width:100%;table-layout:fixed;">
        <tbody>
            <tr>
                <td>
                    <div autopostback="0" class="ms-inputuserfield" id="UserField_checkNames_upLevelDiv" name="upLevelDiv" 
                         style="display: none; position: absolute; height: 20px;" tabindex="0"></div>
                    <textarea autopostback="0" class="ms-input" cols="20" id="UserField_checkNames_downlevelTextBox" 
                              rows="1" style="width: 100%; height: 18px;" title="People Picker"></textarea>
                </td>
            </tr>
        </tbody>
    </table>
</td>
<td id="spExtrasHolder" align="right" nowrap="true" style="padding-left:5px;" valign="top">
    <a href="javascript:" id="UserField_checkNames" onclick="ShPointStuff.overridenCheckNames(this);" title="Check Names">
    <img alt="Check Names" src="/_layouts/images/checknames.gif" style="border-width:0px;" title="Check Names"></a>
</td>

I tried to do something like that, with my custom callback functions but it looks like it not goes there

// Overriden function for name checking
instance.overridenCheckNames = function (element) {
    var me = this,
        id = element.id;

    if (!ValidatePickerControl(id)) { ShowValidationError(); return false; }

    var arg = getUplevel(id),
        ctx = id;

    EntityEditorSetWaitCursor(ctx);
    WebForm_DoCallback(id, arg, me.overrideCheckNamesResultHandller, ctx, me.overrideCheckNamesErrorHandller, true);
};

It gets my input element inner data, also takes the element id and goes to WebForm_DoCallback with it but nothing happens after!

No error, no success.

I got other test site, and when I debugging it - it gets same stuff but successfully returns something.

I bet this guids makes sense, but don't know what excatly.

Also, I got no access to server side, only can write some custom js stuff.

So, is there are way to toggle checknames for my custom form from my custom function?

P.S.

above is copied from SO.

UPD:

Found this article here https://www.codeproject.com/Articles/1008871/Developing-Custom-Date-Picker-People-Picker-and-Ch

Tried approach with POSTrequest.

But response I got is

value=A null value was found with the expected type 'Edm.Int32[Nullable=False]'. The expected type 'Edm.Int32[Nullable=False]' does not allow null values.

Request screenshot from fiddler:

Answer 1

Interesing, but it works this way! Wondering why it's not allow me make custom POST request.

When I look at the fields in query variable, I saw that it has wierd field names, maybe that's the reason!

So, one of the way to toggle custom name checking is this:

instance.overridenCheckNames = function (element) {
    var me = this,
        id = element.id;

    if (!ValidatePickerControl(id)) { ShowValidationError(); return false; }

    var arg = getUplevel(id),
        ctx = id,
        clientContext = new SP.ClientContext.get_current(),
        query = new SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters();

    query.set_allowMultipleEntities(false);
    query.set_maximumEntitySuggestions(50);
    query.set_principalType(1);
    query.set_principalSource(15);
    query.set_queryString(arg);

    var searchResult = SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser(clientContext, query);

    clientContext.executeQueryAsync(function() {
        var results = clientContext.parseObjectFromJsonString(searchResult.get_value());
        var txtResults = '';
    });
};