我正在使用jquery-select2-4搜索外部数据库并向用户显示他可以选择的搜索结果。
我有一个在这个 jsfiddle上运行的工作版本。
但是,例如,如果只返回 1 个搜索结果,我想跳过整个选择过程,只需将返回的搜索结果添加到所选选项列表中即可。根据select2 文档,我可以添加一个新选项,如下所示:
option = new Option("Sample text", "123", true, true);
select2_element.append(option);
select2_element.trigger('change');
这似乎在某种程度上起作用。但是有几个问题。
- 添加选项后,我无法清除搜索字段。
- 我无法添加除 an
id
和 a之外的任何其他内容text
。 - 添加的选项以 显示给用户
undefined
。
我意识到这个问题包含 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", "123", true, 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();
});