jQueryUI:自动完成大数据是悬挂浏览器

Question

我在我的项目中使用jQueryUI的autcomplete.我有一个自动完成文本,其中用户搜索的东西和相应的数据下拉.

使用小数据集,它工作正常.当数据集很大时会出现问题.我有几乎1L记录具有唯一值,我作为源附加autocomplete.

现在,一旦用户在文本栏中输入搜索字符串,浏览器就会因为autocompletejQueryUI 的处理而挂起原因.

我想知道如何优化它或使其更快,以便borwser不会挂起.这里的plunkr我创建的发挥.这就是我将源连接到自动完成的过程.

$("#tags").autocomplete({
      source: availableTags
});

Answer 1

而不显示所有50000条记录仅显示前10条.最小搜索字符长度从默认0增加到2

$(function () {
            var availableTags = [
              "ActionScript",
              "AppleScript",
              "Asp",
              "BASIC",
              "C",
              "C++",
              "Clojure",
              "COBOL",
              "ColdFusion",
              "Erlang",
              "Fortran",
              "Groovy",
              "Haskell",
              "Java",
              "JavaScript",
              "Lisp",
              "Perl",
              "PHP",
              "Python",
              "Ruby",
              "Scala",
              "Scheme"
            ];
            for (var i = 0; i < 50000; i++) {
                availableTags.push('abc' + i);
            }
            $("#tags").autocomplete({
                minLength: 2,
                source: function (request, response) {
                    var results = $.ui.autocomplete.filter(availableTags, request.term);

                    response(results.slice(0, 10));
                }
            });
        });

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

 <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>