javascript - jQueryUI : Autocomplete with large data is hanging browser

Question

我正在使用jQueryUI's autcomplete在我的项目中。我有一个自动完成文本，用户在其中搜索某些内容，相应的数据出现在下拉列表中。

对于小数据集，它工作得很好。当数据集很大时就会出现问题。我有近 1L strip 有唯一值的记录，我已将这些记录作为源附加到自动完成。

现在，只要用户在文本栏中输入搜索字符串，浏览器就会因 jQueryUI 的 autocomplete 的处理而挂起。

我想知道如何优化它或使其更快，以便浏览器不会挂起。这是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>