我有一个相当简单的要求集,但我无法弄清楚如何使用 Select2 来实现它...
- 我想在页面上输入内容
- 用户可以在其中输入内容以触发 AJAX 调用
- 其中还会显示预加载的选项列表,用户可以单击这些选项,而无需键入来触发 AJAX。
- 如果您关闭(模糊)输入,然后再次重新打开它,则之前加载的 AJAX 响应仍应显示(而不是选项为空,您必须开始输入才能再次加载它们)。
我可以执行 #1 和 #2(当然也可以执行 #1 和 #3!),但我无法在一个输入字段中获得所有三个要求。我还没有找到任何方法来执行#4。
实际上,为了实现#3,我想我正在寻找一种方法将我的候选列表注入(inject)到通常是ajax返回的选项中,并使用类似#4的东西来确保打开字段时这些不会被清除.
有没有办法初始化 Select2 字段的选项(通常是 Ajax 加载)?我尝试过传递 data
但它不起作用,我尝试使用 initSelection 直到我意识到这不相关,我尝试了各种方法,但无济于事......
希望这是可能的,我只是在某个地方错过了一个选项!
附注我在 Stack 上读过几个标题与此类似的帖子,但似乎没有一个回答这个问题。如果我错过了重要的一件事,请告诉我!
最佳答案
我认为如果您使用 Select2 的 query
选项而不是 ajax
选项,您就可以做到这一点。这样,如果输入了任何字符,您就可以发出 ajax 请求,但如果没有输入字符,则显示默认列表。
如果您的默认选项定义如下:
var DEFAULT_OPTIONS = [
{ id: 'def1', text: 'Default Choice 1' },
{ id: 'def2', text: 'Default Choice 2' },
{ id: 'def3', text: 'Default Choice 3' }
];
您可以执行以下操作:
var lastOptions = DEFAULT_OPTIONS;
$('#select').select2({
minimumInputLength: 0,
query: function(options) {
if (options.term) {
$.ajax({
type: 'post', // Or 'get' if appropriate
url: 'your_ajax_url',
dataType: 'json',
data: {
term: options.term // Change name to what is expected
},
success: function(data) {
lastOptions = data;
options.callback({ results: data });
}
});
} else {
options.callback({ results: lastOptions });
}
}
});
<强> jsfiddle
关于javascript - Select2 - 使用预加载选项创建 ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27000381/