SharePoint autocomplete solution with At.js.

atwho.js

$('.atwho-inputor').atwho({
    at: "@",
    data: ["one", "two", "three"],
}).atwho({
    at: ":",
    data: ["+1", "-1", "smile"]
});

Autocomplete.js

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
    $('div[id^=PostBody]').atwho({
        at: "@",
        search_key: "DisplayText",
        limit: 10,
        callbacks: {
            remote_filter: function(query, callback) {
                var context = SP.ClientContext.get_current();
                var picker = new SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters();
                picker.set_allowMultipleEntities(false);
                picker.set_maximumEntitySuggestions(10);
                picker.set_principalType(1);
                picker.set_principalSource(15);
                picker.set_queryString(query);
                var searchResult = SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser(context, picker);
                context.executeQueryAsync(
                    function() {
                        var results = context.parseObjectFromJsonString(searchResult.get_value());
                        callback(results);
                    },
                    onError
                );
            }
        }
    });
});

SP.UI.Microfeed.js

SP.SOD.executeFunc('SP.js', 'SP.ClientContext', function() {
    var $v_0 = SP.ClientContext.get_current();
    var $v_1 = new SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters();
    $v_1.set_allowMultipleEntities(false);
    $v_1.set_maximumEntitySuggestions(50);
    $v_1.set_principalType(1);
    $v_1.set_principalSource(15);
    $v_1.set_queryString($p0);
    var $v_2 = SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser($v_0, $v_1);
    $v_0.executeQueryAsync(
        function() {
            var $v_3 = $v_0.parseObjectFromJsonString($v_2.get_value());
            //...
        },
        function() {
            //...
        }
    );
});

tpl.js

insert_tpl: "<span>${atwho-data-value}</span>",
tpl: "<li data-value='<a href=\"/sites/my/Person.aspx?accountname=${Description}\">${atwho-at}${DisplayText}</a>' >\
        <img src=\"/_layouts/15/userphoto.aspx?accountname=${Description}&size=S\" style=\"width:24px; height:24px;\"/>\
            ${DisplayText}\
        </li>",