javascript - JQuery 自动完成大量数据

Question

这个问题已经有答案了:

jQuery autocomplete UI with servlet is not returning any data (1 个回答)

已关闭 7 年前。

我正在使用纯 JSP 和 servlet 开发一个应用程序。在我的一个 JSP 页面中，我有一个字段，当用户开始输入时它应该自动完成。为此，我使用了 JQuery 自动完成 ( https://jqueryui.com/autocomplete/ ) 插入。

我所做的是，使用 Servlet 从数据库加载数据，并将该数据作为 Bean 传递到 JSP。 。在我的 JSP 中，我在 JavaScript 中使用 JSTL 来提供自动完成字段。

下面是代码

<script>
            $(function () {
                var availableTags=[] ;

                <c:forEach var="NamesList" items="${requestScope['NamesList']}">
                     availableTags.push("${NamesList.Name}");
                </c:forEach>

                $("#addTxt").autocomplete({
                    source: availableTags
                });
                $( "#addTxt" ).autocomplete( "option", "appendTo", ".form-horizontal" );



            });
</script>



<input id="addNameTxt" name="nameTxt"  class="form-control input-md" >

但这是最好的部分。该列表包含 22,500 个元素。有些是长名称，可能包含超过 50/60 个单词。现在的问题是，尽管加载页面不需要太多时间，但“有时”在自动完成启动时它会卡住。我猜它正在搜索大量元素并导致内存不足或其他问题。

我还注意到以下行为，这可能会导致这种延迟。想象一下我有如下文本。

Cat/Bat/Dog/Space ship/FrontLine
Cat
Bat
Space Ship

如果我输入“Bat”，我的期望是找到以“Bat”开头的文本，而不是中间某处可能包含“Bat”的文本。由于这种搜索需要时间，我猜当有 22,500 条记录时，它也会变得滞后。无论如何，这只是一个旁注。

那么，我该如何解决这个问题并使自动完成速度更快？

Answer 1

要查找以“Bat”开头的文本，您需要在自动完成调用中添加以下正则表达式。这也可能使自动完成速度更快。

$("#addTxt").autocomplete({
    source: function(req, responseFn) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp( "^" + re, "i" );
                var a = $.grep( availableTags, function(item,index){
                    return matcher.test(item);
                });
                responseFn( a );
            }
});