jQueryUI：大きなデータを含むオートコンプリートがブラウザをハングしています

私のプロジェクトではjQueryUI's autcompleteを使用しています。私はユーザーの検索の何かと対応するデータがドロップダウンで来るオートコンプリートのテキストを持っています。jQueryUI：大きなデータを含むオートコンプリートがブラウザをハングしています

小さなデータセットでは正常に動作しています。この問題は、データセットが大きい場合に発生します。私はautocompleteへのソースとして添付したユニークな値を持つほぼ1Lのレコードを持っています。

ユーザーがテキストバーに検索文字列を入力するとすぐに、ブラウザがハングする原因は、jQueryUIのautocompleteの処理のためです。

ボクサーがハングしないように、どのように最適化したり、速くすることができるか知りたいのですが。ここでは私が作成したplunkrです。そして、これは私がオートコンプリートにソースを付けるためにやっていることです。

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

出典

2016-08-17 Hitesh Kumar

表示される結果の制限を10個追加する。

出典

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件のレコードが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

にデフォルトの0から増加しただけで、トップ10の最小検索文字の長さを示して確認してくださいローカルのdevice.c以外の場所からフェッチしたデータを制限することは、それらを表示していないとしても、n彼らのために割り当てられたメモリ。そうしても助けになるでしょう。 P.s：貧しい私の英語のお詫び

出典

2017-08-14 06:41:58

jQueryUI：大きなデータを含むオートコンプリートがブラウザをハングしています

答えて

関連する問題