javascript - jQuery select2 - 最初は何もロードしない - json ソースからの検索を表示

Question

HTML

<div class="form-group">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12">
                <table class="table table-bordered table-hover additionalMargin" id="actionTable">
                    <thead>
                    <tr >
                        <th class="text-center">Action</th>
                        <th class="text-center">Responsibility</th>
                        <th class="text-center">Completion Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id='actionRow1'>
            <td>
              <input type="text" name='actionInput[0][action]' id="actionInput"  placeholder='Action' class="form-control"/>
            </td>
            <td>
              <select class="responsibility" name='actionInput[0][responsibility]' id="responsibilityInput">
                <option value=""></option>
                    <option value="One">One</option>
                    <option value="Two">Two</option>
                    <option value="Three">Three</option>
                </select>
            </td>
            <td>
              <input type="text" name='actionInput[0][deliveryDate]' id="dateInput" placeholder='Completion Date' class="form-control dateControl"/>
            </td>
          </tr>
                    </tbody>
                </table>
                <a id="add_row" class="btn btn-default pull-right">Add Row</a>
                <a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
            </div>
        </div>
    </div>
</div>

ジャバスクリプト

var cloned;

$(function() {
    initDatepickersAndSelect();
    $('#add_row').on('click', function(evt){addRow();});
    $('#delete_row').on('click', function(evt){deleteRow();});
});

function initDatepickersAndSelect() {
    cloned = $("table tr#actionRow1").eq(0).clone();
    $(".dateControl:first").datepicker({
      dateFormat: "dd-mm-yy"
    });

    $(".responsibility:first").select2({
      tags: true
    });
}

function addRow() {

    var $tr = cloned.clone();
    var newRowIdx = $("table#actionTable tr").length;
    $tr.attr('id', 'actionRow' + newRowIdx);

    $tr.find("input, select").each(function(i_idx, i_elem) {

      var $input = $(i_elem);

      if($input.is("input")) {
        $input.val("");
      }

      $input.attr({
        'id': function(_, id) {
          return id + newRowIdx;
        },
        'name': function(_, name) {
          return name.replace('[0]', '['+ newRowIdx +']');
        },
        'value': ''
      });


    });
    $tr.appendTo("table#actionTable");

    $(".dateControl", $tr).datepicker({
      dateFormat: "dd-mm-yy"
    });

    $(".responsibility", $tr).select2({
      tags: true
    });
}

function deleteRow() {
    var curRowIdx = $("table#actionTable tr").length;
    alert(curRowIdx);
    if (curRowIdx > 1) {
        $("#actionRow" + (curRowIdx - 1)).remove();
        curRowIdx--;
    }
}

Jsfiddle - https://jsfiddle.net/r94pkLLb/3/

すべてが正常に機能していますが、責任の選択には約 10000 のオプションがあることを考慮してください。

ユーザーが検索を入力したときに select2 が空で読み込まれるが、一般的な JSON 配列からデータを入力し始めるように、これを最適化する方法があるかどうか疑問に思っていましたか?

select2 のドキュメントと例を調べましたが、これに対する解決策がわかりませんでした。どんな助けや指針も大歓迎です。問題の詳細を提供できる場合はお知らせください。