Chrissa Chrissa - 3 years ago 222
jQuery Question

Autocomplete with load on scroll in JQuery/Classic ASP

There is a autocomplete textbox in classic ASP. Minimum length is set to 4 but it is very slow the autocomplete list returns more than 500 records.

log in console returns expected result and if less than 500 rows, correct list is returned in autocomplete textbox.

If I want to load more data while scrolling instead of loading the page, what would be the best method?

$(document).ready( function(){
var availableCode = new Array();
var strCode = "";

<%
Dim idxJs
for idxJs = 0 to UBound(CodeList)-1
%>
availableCode[<%=idxJs %>] = unescape('<%= Escape(CodeList(idxJs)) %>');

<% next %>

function customFilter(array, terms) {
arrayOfTerms = terms.split(" ");
var term = $.map(arrayOfTerms, function (tm) {
return $.ui.autocomplete.escapeRegex(tm);
}).join('|');
var matcher = new RegExp("(?![^&;]+;)(?!<[^<>]*)("+term+")(?![^<>]*>)(?![^&;]+;)" , "i");
return $.grep(array, function (value) {
console.log("result - " + matcher.test(value.label || value.value || value));
console.log("value - " + value)
return matcher.test(value.slice(0, 10));
});
};

$( "#frmCode" ).autocomplete({
multiple: true,
mustMatch: false,
minLength: 4,
delay: 100,
search: function (event,ui) {
window.pageIndex = 0;
},
source: function (request, response) {
response(customFilter(
availableCode, request.term));
}
});
} );


Some updates:
In the beginning of the classic ASP code, I added the below for cache control, it made some improving but it is still not working.

<%@ Language=VBScript %>
<%

Response.buffer=true
Response.Expires = -1
Response.ExpiresAbsolute = Now() -1
Response.CacheControl = "no-cache"
Response.AddHeader "cache-control", "private"
Response.AddHeader "Pragma", "no-cache"

%>

Answer Source

For the matcher, I made a change to the below.

var matcher = new RegExp("" + term,  "i");

I also added "slice" to show only the top 100. This made a significant performance improvement on this issue.

$( "#frmCode" ).autocomplete({
    multiple: true,
    multipleSeparator: " ",
    mustMatch: false,
    minLength: 2,
    search: function (event,ui) {
    window.pageIndex = 0;
},
source: function (request, response) {
    response(customFilter(
    availableCode, request.term).slice(0, 100));
 }

Thank you to everyone for the advice!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download