用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>
使用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查询的功能。
但是，在绑定select2后，它不显示<optgroup label="System Data">...</optgroup> ，
select2选项是空的，它只显示提示“请输入1个或多个字符”。
它甚至不清楚是否可以做，谢谢。
与select2相关的UPD在使用ajax时删除默认选项
使用ajax适配器时，Select-2会删除选项。
UPD2 github问题https://github.com/select2/select2/issues/3828
如果您希望有一个始终可见的<optgroup> ，无论客户搜索什么，在其下方，在另一个<optgroup> ，您想查看搜索结果，请尝试以下操作：
在您的服务器端脚本中，您正在处理输入的客户端的搜索查询时，应该返回一个json_encoded array ，其中包含要在选择框中显示的项目。 而不是这样，尝试做这样的事情：
**根据您的要求修改代码问题评论**
$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
我使用的是类似于代码的类似代码，但可能还有其他一些东西需要设置才能使用（我在几个月前编写了代码，而且我记得我有一个相当困难的代码如果这种方法行不通，请通知我，我会查看我的代码，看看我是如何做到的。
在这种情况下可能（并且不幸的是，我认为唯一的）解决方案是编写自定义适配器。 像这样的东西：
$.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，如果你这样做，使用它来要求适配器。
链接地址: http://www.djcxy.com/p/88209.html