Jquery select2 使用ajax选择2个默认选项

我有下一个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>

我想让客户能够看到一些带有项目的默认系统选项

，还可以添加按自己的项目进行搜索ajax查询的功能

但是，在绑定select2后，它不会显示

…

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

甚至不清楚是否有可能，谢谢

UPD 有关

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

---

UPD2github问题

如果您想要一个始终可见的

，无论客户端搜索什么，并且在另一个

下，您想要查看搜索结果，请尝试以下操作：

在服务器端脚本中，在处理客户端键入的搜索查询时，应返回一个json_编码的

数组

，其中包含要在选择框中显示的项目。与其这样，不如尝试这样做：

**根据问题注释中的请求修改代码**

$q=$_REQUEST['q']; //the query string passed, note, that if you have minimumInputLength set, until that inputLength is reached, this part of the code won't run, so if you require the minimumInputLength, you should play with the templateResult option of select2
if (empty($q)) {
   $results=array();
   $result[0]=array(); //an optgroup to display when no query was sent
   $result[0]['text']='System Data';
   $result[0]['children']=array();
   // populate your first optgroup here, using the format which you are sending to select2.
} else {    
   $result[0]=array(); //an optgroup for results for the users searches
   $result[0]['text']='User results';
   $result[0]['children']=array();
   //populate the children array with the search related results
}

// json_encode the $result array, and return it

我正在使用一个Similar代码，它在我这方面工作得很完美，但在它工作之前，可能还需要设置一些其他的东西（我几个月前编写了代码，我记得我花了相当长的时间才弄清楚这一点），如果这种方法不起作用，通知我，我会检查我的代码，看看我到底是如何做到的。

在这种情况下，可能（不幸的是，我认为唯一）的解决方案是编写自定义适配器。 大概是这样的：

$.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;
});

---

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

因此，您基本上希望有一个始终可见的optgroup，无论客户端搜索什么，并且在另一个optgroup下面，要查看搜索结果吗？只有在inputAdam中没有文本时，用户才应在“搜索输入”下的下拉列表中查看默认值，这不是服务器端问题，用户应在搜索前查看默认数据。使用此解决方案，用户确实会看到默认数据，我不知道还有其他解决方案。如果希望仅在搜索输入为空时显示默认数据，则只需在查询为空时将该数据返回服务器端即可。每次进行新的搜索时，Select2都会重建

元素的html，因此如果您想要一直存在的内容，则必须处理该服务器端。Adam，当用户未输入文本时，也不会向服务器端执行查询，同样，它应该使用客户端修复。我有这个问题，因为ajax适配器从select on select2初始化过程中删除了现有的选项，而这不应该被删除happen@Fivell，则不会执行查询，因为您已设置在进行查询之前至少应输入1个字符。如果在设置select时取出minimumInputLength参数，或将其设置为0，则此操作将有效。当您以这种方式单击选择框时，每次将进行1次额外的查询，但将获得所需的结果。如果您需要minimumInputLength 1来进行较少的查询，那么实现所需结果的唯一方法是使用一种“hack”，并使用“templateResult”参数函数。

$.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;
});

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