如何通过ajax预加载阵列并将其用于select2？

我的一般问题是，我想要一个Javascript变量，然后与select2一起使用，为selectmultiple准备选项。我有一个相当大的数组（7000个对象），只想在一个变量中存储一次，而不是不断用搜索词轮询服务器。这是我得到的

HTML只是：

<input type="hidden" id="group_a" multiple="multiple" placeholder="Select at least two treatments">

然而，当我使用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"
    });
});

---

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同步调用时，会锁定整个浏览器。

这是我的解决方案。感谢@John S提供的初始方法，但我无法使用select2格式化程序来解析我的数组。Select2框会告诉我“找不到结果”。我最后在数组中运行for循环，并写出：id，：text散列

从我的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"
  });
});

$（文档）.ready（函数（）{
变量项名称数组=[]；
$.ajax({
url:“/search/typeahead\u terms\u all”，
}).完成（功能（数据）{
//在这里，我遍历我的字符串数组并写出select2所需的散列
对于（索引=0；索引

Doh，我想“异步Javascript和XML”这个名字应该已经泄露了。。。选择2很好。非常感谢！为了安全起见，我只将最初的select2代码移到ajax调用之上。

$(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"
  });
});