如何通过ajax预加载数组并将其用于select2？
我的一般问题是，我希望有一个Javascript变量，然后与select2一起使用，以便为select倍数准备选项。我有一个相当大的数组(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如下所示，我还准备了一个小提琴，它显示了相同的错误。
$(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"
});
});回答 2
Stack Overflow用户
发布于 2015-02-13 20:12:46
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调用时，可以锁定整个浏览器。
Stack Overflow用户
发布于 2015-07-23 16:01:03
这是我的解决办法。感谢@John提供了最初的方法，但我无法让select2格式化程序解析我的数组。Select2框会告诉我“没有发现结果。”最后，我在数组中运行了一个for循环，并写出了:id，:text散列。
从我的json调用开始，有一个字符串‘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"
});
});https://stackoverflow.com/questions/28498599
复制相似问题
腾讯云开发者
