Jquery Chosen Pluginで効率的に使用するには？

Question

私はjQueryで選択したプラグインを使用しました。私のデータセットが大きすぎるので、選択ボックスがぶら下がり、遅いです。ここで私はプラグインを実装している方法です。

var request = $.ajax({ 
    method: "POST", 
    url: "ajaxRequest.php", 
    dataType: "json", 
    data: {fn: 'getCompanyEvent', company_id: selected_cid}, 
    success: function(reqResult){ 
     var append_string = '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">'+ 
       '<div class="row form-group">'+ 
        '<label class="control-label col-lg-3">Select'+ ' Event</label><span class="col-lg-1">:</span>'+ 
        '<div class="col-lg-8">'+ 
         '<select class="chosen" style="width:200px;" onChange="getTemp(this)>'+ 
          '<option>Select</option>'; 
         $.each(reqResult.result, function(ind, va){ 
          append_string += '<option value='+va.event_id+'>'+va.event_name+'</option>'; 
         });  
    append_string += '</select>'+ 
        '</div>'+ 
       '</div>'+ 
      '</div>'; 
     $('#dynmic_slct').append(append_string); 
     jQuery(".chosen").chosen(); 
    } 
}); 

私はUIで選択することは非常に遅かったので、応答がより20Kのレコードを結果としてjqueryのajax() ..アヤックスに使用している、私は以上の5kの値を一覧表示したいですselect要素内にあります。

Answer 1

バックエンドリソースから取得したすべてのレコードに対して、<option>要素を追加しています。あなたのデータセットは非常に大きいので、選択ボックスがハングアップするのは普通です。

あなたが試みることができるのは、選択ボックスのページングメカニズムを実装することです。たとえば、バックエンドのリソース（ajaxRequest.php）をオフセット値（ajaxRequest.php？offsett = 50）でパラメータ化してから、リクエストごとにデータセットから一定量の要素を取得できます。たとえば、リクエストごとに50件のレコードを取得できます。

各リクエストごとに、以前と同じように<option>要素を追加します。 1つの最終的なことは、次のデータセット要素を要求するためにボタンなどを実装することです。

もう1つの方法は、バックエンドリソースにパラメータを送信してデータセットをフィルタリングし、次にフィルタ処理した結果のみを選択ボックスに追加することです。これを実現するには、jQuery Chosen Plugin Filter Text BoxのonChangeイベントを実装します。