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);
};
}
});