当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《jQueryUI:自动完成大数据是悬挂浏览器》经验,为你挑选了1个好方法。

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

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

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

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

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

Ujwal Khairn.. 8

而不显示所有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));
                }
            });
        });
    

    
    

 



1> Ujwal Khairn..:

而不显示所有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));
                }
            });
        });
    

    
    

 
推荐阅读
手机用户2502851955
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有