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：自動完成大數據掛瀏覽器

回答

相關問題