jquery-select2 - 使用 ajax 选择 2 默认选项

Question

我有下一个 html 结构

<select class="change_item_dropdown_ajax form-control" id="item_id" name="item_id" onchange="updateData(this, this.value, 16)" >
<optgroup label="System Data">
  <option value="17">Test</option>
  <option selected="selected" value="18">System</option>
</optgroup>
</select>

Javascript

 $(".change_item_dropdown_ajax").select2({
        ajax: {
            url: "get_user_items",
            dataType: 'json',
            delay: 250,
            theme: "classic",
            data: function (params) {
                return {
                    q: { name_contains: params.term } // search term
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        allowClear: true,
        placeholder: '--- Please select item ---',
        minimumInputLength: 1
    });

我想让客户有可能看到一些带有项目的默认系统选项 <optgroup label="System Data"> ，但还添加了通过他自己的项目进行搜索 ajax 查询的能力。

但是在绑定(bind) select2 后它不显示 <optgroup label="System Data">...</optgroup> ,

select2 选项为空，仅显示提示“请输入 1 个或多个字符”。

甚至不清楚是否可以这样做，谢谢。

更新
相关 select2 removes default options when using ajax

Select-2 在使用 ajax 适配器时删除选项。

UPD2 github问题 https://github.com/select2/select2/issues/3828

Answer 1

在这种情况下，可能(不幸的是，我认为唯一的)解决方案是编写自定义适配器。
像这样的东西:

$.fn.select2.amd.define('select2/data/extended-ajax',['./ajax','../utils','jquery'], function(AjaxAdapter, Utils, $){

  function ExtendedAjaxAdapter ($element,options) {
    //we need explicitly process minimumInputLength value 
    //to decide should we use AjaxAdapter or return defaultResults,
    //so it is impossible to use MinimumLength decorator here
    this.minimumInputLength = options.get('minimumInputLength');
    this.defaultResults     = options.get('defaultResults');

    ExtendedAjaxAdapter.__super__.constructor.call(this,$element,options);
  }

  Utils.Extend(ExtendedAjaxAdapter,AjaxAdapter);

  //override original query function to support default results
  var originQuery = AjaxAdapter.prototype.query;

  ExtendedAjaxAdapter.prototype.query = function (params, callback) {
    var defaultResults = (typeof this.defaultResults == 'function') ? this.defaultResults.call(this) : this.defaultResults;
    if (defaultResults && defaultResults.length && (!params.term || params.term.length < this.minimumInputLength)){
      var processedResults = this.processResults(defaultResults,params.term);
      callback(processedResults);
    }
    else {
      originQuery.call(this, params, callback);
    }
  };

  return ExtendedAjaxAdapter;
});

https://gist.github.com/govorov/3ee75f54170735153349b0a430581195

该适配器首先分析查询词。如果 term 长于 minimumInputValue，AjaxAdapter 将被启动。否则，defaultResults 将被传递给回调。

要使用此适配器，只需将其传递给 select2 选项:

dataAdapter: $.fn.select2.amd.require('select2/data/extended-ajax')

我没有使用 requireJS 或 AMD，如果使用，请使用它来要求适配器。