jQueryUI：自动完成大数据挂浏览器

我在我的项目中使用jQueryUI's autcomplete。我有一个自动完成文本，用户搜索内容和相应的数据进入下拉菜单。jQueryUI：自动完成大数据挂浏览器

对于小数据集，它工作正常。数据集很大时会出现问题。我有几乎1L的记录具有独特的值，我已附加作为来源autocomplete。

现在，只要用户在文本栏中输入搜索字符串，浏览器挂起的原因是因为jQueryUI的autocomplete所做的处理。

我想知道如何对其进行优化或使其更快，从而使borwser不会挂起。这是我创造的plunkr。这就是我将源代码附加到自动完成功能的过程。

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

来源

2016-08-17 Hitesh Kumar

添加显示结果的限制，如十。

来源

2016-08-17 07:13:46

可以请你分享我怎么设置它。 –

谢谢...... D –

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Autocomplete - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.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> 
    <script> 
    $(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" 
    ]; 
    var max= 10000; 
    // change max to 1000000 ie. 1L and it hangs. 
    for(var i=0;i<max;i++){ 
     availableTags.push(i+''); 
    } 

    $("#tags").autocomplete({ 
    source: function(request, response) { 
     var results = $.ui.autocomplete.filter(availableTags, request.term); 

     response(results.slice(0, 20)); 
    } 
}); 
    }); 
    </script> 
</head> 
<body> 

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


</body> 
</html>

请检查该

来源

2016-08-17 07:15:21 mean

我同意，与服务器端的工作是更好的效率明智，而不是从服务器获取所有数据的缺乏，他应该使用像或其他一些SQL查询attritue获取类型字符串上的数据 – mean

反而显示的所有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>

来源

2016-08-17 07:38:18

我建议限制你从本地设备以外的地方获取的数据。因为不显示它们并不意味着你有n为他们分配内存。尽管这样做也有帮助。 P.s：道歉为我可怜的英语

来源

2017-08-14 06:41:58

jQueryUI：自动完成大数据挂浏览器

回答

相关问题