我的一般问题是我想要一个Javascript变量,然后我与select2一起使用,以准备选择倍数的选项。我有一个相当大的数组(7000个对象),只想将它存储在一个变量中,而不是经常用搜索术语轮询服务器。这就是我得到的。
HTML只是:
<input type="hidden" id="group_a" multiple="multiple" placeholder="Select at least two treatments">
现在,当我直接编写变量时,一切都按预期工作:
var treatments = [{id: 1, text: "you"}, {id: 2, text: "me"}];
$("#group_a").select2({
data: treatments,
minimumInputLength: 1,
multiple: true,
closeOnSelect: false,
width: "660px"
});
然而,当我使用ajax加载数组时,事情变得奇怪了。我的代码是这样做的:
$.ajax({
url: '/funny/url',
}).done(function(data) {
treatments = data.choices;
});
我倾向于得到以下错误,除非我使用调试器逐步执行代码,然后它按预期工作。那么这可能是一个时间问题吗?
uncaught exception: query function not defined for Select2 group_a
我的完整javascript如下所示,我还准备了一个显示相同错误的fiddle。
$(document).ready(function() {
var treatments;
$.ajax({
url: '/funny/url',
}).done(function(data) {
treatments = data.choices;
});
$("#group_a").select2({
data: treatments,
minimumInputLength: 1,
multiple: true,
closeOnSelect: false,
width: "960px"
});
});
答案 0 :(得分:2)
ajax调用是异步的,所以当你正在检测Select2控件时,treatments
仍未定义。
您可以执行以下操作:
$(document).ready(function() {
$.ajax({
url: '/funny/url',
}).done(function(data) {
$("#group_a").select2({
data: data.choices,
minimumInputLength: 1,
multiple: true,
closeOnSelect: false,
width: "960px"
});
});
});
但更好的是,我会做以下几点。
最初将treatments
设置为空数组,并使用data
选项的函数,以便更改treatments
时,Select2控件将选择更改。这样,您可以立即检测Select2控件,然后使用ajax调用返回的数据更新treatments
。此外,您最初可以禁用Select2控件,然后在ajax调用返回时启用它。
$(document).ready(function() {
var treatments = [];
$.ajax({
url: '/funny/url',
}).done(function(data) {
treatments = data.choices;
$("#group_a").select2('enable', true);
});
$("#group_a").select2({
data: function() { return { results: treatments }; },
minimumInputLength: 1,
multiple: true,
closeOnSelect: false,
width: "960px"
}).select2('enable', false);
});
第三个选项是保留原始代码,但使ajax调用同步。我建议不要这样做。当您使ajax调用同步时,您将锁定整个浏览器。
答案 1 :(得分:0)
这是我的解决方案。感谢@John S的初始方法,但是我无法让select2格式化程序来解析我的数组。 Select2框会告诉我'没有找到结果'。我最终在我的数组中运行for循环并写出:id,:text hashes。
从我的json ajax调用开始是一个字符串'terms'的数组:
// localhost:3000/search/typeahead_terms_all.json
[
"Super Term",
"cool term",
"killer term",
"awesome term",
"try term",
"param term",
"try name",
"Academic Year",
"grade average",
"Hello Term",
"Academic Calendar",
"kinda cool term",
"My Term",
]
然后是javascript:
$(document).ready(function() {
var term_names_array = [];
$.ajax({
url: '/search/typeahead_terms_all',
}).done(function(data) {
// Here I iterate through my array of strings and write out the hash select2 needs
for (index = 0; index < data.length; ++index) {
term_names_array.push({ id: index, text: data[index] });
}
$('.report_term_input').select2('enable', true);
});
$('.report_term_input').select2({
dataType: 'json',
data: term_names_array,
multiple: true,
width: "500px"
});
});