Jquery ui Autocomplete how to add pagging on scroll and loading icon on untill result from api done.

Jquery ui Autocomplete how to add pagging on scroll and loading icon on untill result from api done.

I am new to jquery.I have implemented jqueryui autocomplete in my page set ui for item on renderitem method. I am loading data using ajax and that returns me 1 items at a time. parameter using to get data from api is pageIndex and search. now My question is on first call I am able to get first 15 items but now I need when I scroll down and reach to last item in autocompelete mean 15 item next call gone to api and this time pageindex should be 2 and so on each scrolling with infinite scrolling and loading icon shown till data not returned  . on every time when I scroll it will call api with new pageindex++ . and when scroll up with pageindex--. Please help me solve this. here is my logic.


$("#test")
        .autocomplete({
            minLength: 0,
             search: function () { $(this).addClass('loading'); },
             open: function () { $(this).removeClass('loading'); },
            source: function (request, response) {
                $.ajax({
                    url: "/Story/GetTopics",
                    dataType: "json",
                    data: {
                        search: $("#knowledgegraphinput").val(),
                        pageIndex: 1
                    },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            focus: function (event, ui) {
                $("#knowledgegraphinput").val(ui.item.Name);
                return false;
            },
            select: function (event, ui) {
                $("#test").val(ui.item.Name);
                return false;
            },
            create: function () {
                $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                    return $('<li>').
                        append('<div class="row" style="max-width:470px !important;"><div style="width:100%"><div style="-moz-user-select: none;width:20%;float:left;"> <img src="' + item.ImageUrl + '" style="-moz-user-select: none;width:60px;"/></div> </div> <div style="width:80%;float:left;"><div><div style="-moz-user-select: none;">' + item.Name + '</div></div><div style="-moz-user-select: none;"><a href="' + item.Url + '">' + item.Category + '</a></div><div style="-moz-user-select: none;">' + item.Description + '</div><div style="-moz-user-select: none;">Source: <a href="' + item.WikiUrl + '" style="-moz-user-select: none;">Wikipedia</a>, available under <a href="' + item.License + '" style="-moz-user-select: none;">License</a>.</div></div></div>').appendTo(ul);
                };
            }
        });