我有一个运行在this jsfiddle的工作版本.
但是,例如,如果仅返回1个搜索结果,我想跳过整个选择过程,并将返回的搜索结果添加到所选选项的列表中.根据select2 docs我可以添加一个这样的新选项：
option = new Option("Sample text","123",true,true);
select2_element.append(option);
select2_element.trigger('change');
这似乎在某种程度上起作用.但有一些问题.
>添加选项后,我无法清除搜索字段.
>我不能添加任何其他id和文本.
>添加的选项将显示给用户未定义.
我意识到这个问题包含3个方面,但是所有3个方面都可能回溯到这个1个问题：
如何以编程方式添加新的jquery-select2-4选项并重置搜索字段？
为了您的参考,这是我问的代码的上下文：
var formatRepo,formatRepoSelection,selectRepos;
formatRepoSelection = function(element) {
return element.name + ' ' + element.forks + ' ' + element.id;
};
formatRepo = function(element) {
var markup;
if (!element.loading) {
return markup = element.name + ' ' + element.id;
}
};
selectRepos = function() {
var option,select2_element;
select2_element = $('#select2_element');
select2_element.select2({
ajax: {
url: "https://api.github.com/search/repositories",dataType: 'json',data: function (params) {
return {
q: params.term,page: params.page
};
},processResults: function (data,params) {
if (data.items.length === 1) {
// START: The code I am asking about.
// Add the search result directly as an option.
option = new Option("Sample text",true);
select2_element.append(option);
return select2_element.trigger('change');
// END: The code I am asking about.
} else {
params.page = params.page || 1;
return {
results: data.items,pagination: {
more: (params.page * 30) < data.total_count
}
};
}
},cache: true
},escapeMarkup: function(markup) {
return markup;
},templateResult: formatRepo,templateSelection: formatRepoSelection
});
};
$(function() {
return selectRepos();
});
解决方法
1.模拟唯一剩余物品的选择
如您所说,创建一个选项元素有其局限性：您只能指定id和text属性,不需要访问所选项的其他属性.
此外,它会生成未定义的值.这是因为回调函数formatRepoSelection尝试访问为该选项元素创建的对象未定义的属性(名称和叉).您可以尝试解决这个问题,并在这种情况下使用text属性,但是您仍然无法解决上述限制.
我在这里提出的解决方案有不同的做法.而不是直接创建标签,您可以模拟用户对最后一个项目的选择,将mouseup事件发送到该列表项.
这具有如同用户点击了该项目一样应用正常选择行为的直接优点,因此可立即解决所有三个问题：
>自动清除过滤器文本;
> formatRepoSelection函数接收通常的对象,因此标签的标签符合预期;
>与任何项目相同的属性可用于您.
这是代码实现：
if (data.items.length === 1) {
// Change 1:
// Allow the list to update
setTimeout(function() {
// ... and then send a click event to the first list item
// Note the used id has the SELECT id in the middle.
$("#select2-select2_element-results li:first-child").trigger('mouseup');
},0);
这个解决方案的缺点是你让自己依赖实现方面;未来版本的select2可能会根据HTML元素和属性组织结果不同.
但是,当您决定使用更新版本的select2时,更新代码不应该是一件大事.
2.返回正确的对象
您的代码在select2库中产生错误：
TypeError: b is undefined,at select2.min.js:2:9842
这是因为这个说法：
return select2_element.trigger('change');
这返回jQuery select2_element对象,但是库期望返回值具有结果属性.
由于触发器不再需要,因此可以通过以下方法来替换：
// Change 2:
// Return empty results array
return {
results: data.items
};
不要试图设置结果：[],因为我们仍然需要该项目来模拟鼠标事件.
那就是这一切.
这里是工作的解决方案：JS fiddle.