在 JQuery/Classic ASP 中滚动加载时自动完成答案

【问题标题】：Autocomplete with load on scroll in JQuery/Classic ASP在 JQuery/Classic ASP 中滚动加载时自动完成
【发布时间】：2017-07-17 14:58:46
【问题描述】：

经典 ASP 中有一个自动完成文本框。最小长度设置为 4，但自动完成列表返回超过 500 条记录非常慢。

登录控制台返回预期结果，如果少于 500 行，则在自动完成文本框中返回正确的列表。

如果我想在滚动而不是加载页面时加载更多数据，最好的方法是什么？

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

一些更新：在经典 ASP 代码的开头，我添加了下面的缓存控制，它做了一些改进，但仍然无法正常工作。

<%@ 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"

%>

【问题讨论】：

这里明显的答案是返回少于 200 行。无论如何，您真的不需要更多，因为您只会向用户提供大量信息。
@RoryMcCrossan 我知道它不应该是大量记录。但是，我们的用户提出要求，即使超过1500条记录，只要用户输入与数据库匹配，就必须列出所有内容。
哎哟。这将是大量的数据传输然后附加到 DOM。如果你想加快速度，我建议避免使用 jQuery 并使用普通的 JS 方法，尽管我的猜测是每个请求有这么多记录将是徒劳的
不确定您的要求和项目的时间框架。您可以使用 Ehcache 将数据库条目放在一个文件中并从该文件中读取。应该快得多。 ehcache.org/documentation
@RoryMcCrossan 我们将 RegExp 条件更改为 var matcher = new RegExp("^"+"(?![^&;]+;)(?!]*)(" +term+")(?![^]*>)(?![^&;]+;)" , "i") - 在开头添加了 "^" 但它仍然可以返回近 5k 条记录具体的关键字..我们可以尝试其他方法吗？

标签： jquery autocomplete jquery-ui-autocomplete autoload onscroll

【解决方案1】：

对于匹配器，我对以下内容进行了更改。

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

我还添加了“切片”以仅显示前 100 名。这在此问题上显着提高了性能。

$( "#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));
 }

感谢大家的建议！

【讨论】：

【解决方案2】：

其中一个瓶颈是将数据输出到数组 CodeList 然后循环遍历数据并写入每个单独的行以填充您的 javascript 数组。如果数组 CodeList 中的数据不经常更改，我使用计划任务每天运行几次，运行 vbscript 以生成 html/asp 页面，其中 javascript 数组没有 asp 循环。您将用实际的 javascript 数组数据替换您的 for/next asp 循环。该页面将加载得更快。

【讨论】：