ajax - 如何通过ajax预加载数组并将其用于select2？

Question

我的一般问题是我想要一个 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"
    });
});

Answer 1

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

jsfiddle

更好的是，我会执行以下操作。

最初将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);
});

jsfiddle

第三个选项是保留原始代码，但使 ajax 调用同步。但我建议不要这样做。当您同步进行 ajax 调用时，您会锁定整个浏览器。