我正在使用jquery-select2-4搜索外部数据库,并向用户显示他可以选择的搜索结果。
我在this jsfiddle上运行了一个正在运行的版本。
但是,例如,如果只返回1个搜索结果,我想跳过整个选择过程,只需将返回的搜索结果添加到所选选项列表中。根据{{3}},我可以添加一个像这样的新选项:
option = new Option("Sample text", "123", true, true);
select2_element.append(option);
select2_element.trigger('change');
这似乎在某种程度上起作用。但是有一些问题。
id
和text
的任何其他内容。undefined
显示给用户。我意识到这个问题包含3个方面,但所有3个方面可能都会回到这个问题:
如何以编程方式添加新的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();
});
答案 0 :(得分:1)
我对原始代码进行了两处更改:
正如您所指出的,option
元素的创建有其局限性:您只能指定 id 和 text 属性,不可能有访问所选项目的其他属性。
此外,它还会生成 undefined 值。这是因为回调函数 formatRepoSelection 尝试访问为{{1}创建的对象未定义的属性(名称和 forks )元素。在这种情况下,您可能已经尝试解决此问题并使用 text 属性,但您仍然无法解决上述限制。
我建议的解决方案有不同的方法。您可以模拟用户对最后一项的选择,而不是直接创建标记,将 mouseup 事件发送到该列表项。
这具有直接的优势,即应用正常选择行为就像用户点击了该项一样,因此它立即解决了您遇到的所有三个问题:
以下是实现此目的的代码:
option
此解决方案的缺点是您自己依赖于实现方面;未来版本的 select2 可能会在HTML元素和属性方面对结果进行不同的组织。
但是,当您决定使用较新版本的 select2 时,更新代码应该不是什么大问题。
您的代码在 select2 库中生成错误:
TypeError:b未定义,位于select2.min.js:2:9842
这是因为这句话:
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);
这将返回jQuery select2_element 对象,但库期望返回值具有结果属性。
由于不再需要触发器,可以通过将以上内容替换为:
来解决此问题。return select2_element.trigger('change');
不要试图设置 // Change 2:
// Return empty results array
return {
results: data.items
};
,因为我们仍然需要项目来模拟鼠标事件。
而且......就是这样。
以下是工作解决方案:JS fiddle。