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>

JAVASCRIPT

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文档和示例，但无法找到解决方案。非常感谢任何帮助或指示。如果我能提供有关问题的任何细节，请告诉我。