如何通过ajax预加载数组并将其用于select2? [英] How to pre-load an array via ajax and use it for select2?

问题描述

我的一般问题是我想拥有一个Javascript变量，然后将其与select2一起使用，以准备选择多个的选项.我有一个相当大的数组(7000个对象)，只想将其存储在变量中一次，而不是用搜索项不断地轮询服务器.这就是我得到的.

My general problem is that I want to have a Javascript variable which I then use with select2, to prepare the options for a select multiple. I have a fairly large array (7000 objects) and just want to store that once in a variable rather than constantly polling the server with search terms. Here is what I got.

HTML很简单:

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

现在，当我直接编写变量时，一切都按预期工作:

Now, when I write the variable directly everything works as expected:

var treatments = [{id: 1, text: "you"}, {id: 2, text: "me"}];
$("#group_a").select2({
    data: treatments,
    minimumInputLength: 1,
    multiple: true,
    closeOnSelect: false,
    width: "660px"
});

但是，当我使用ajax加载数组时，事情变得很奇怪.我的代码可以做到这一点:

However, when I use ajax to load the array things get weird. My code to do that:

$.ajax({
    url: '/funny/url',
}).done(function(data) {
    treatments = data.choices;
});

除非使用调试器单步执行代码，否则我通常会收到以下错误，然后它将按预期工作.那么这可能会是时间问题吗?

I tend to get the following error unless I use the debugger to step through the code, then it works as expected. So could this somehow be a timing issue?

uncaught exception: query function not defined for Select2 group_a

我的完整javascript如下所示，并且我还准备了 fiddle ，它显示了相同的错误

My complete javascript looks like below and I've also prepared a fiddle which shows the same error.

$(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仍未定义.

The ajax call is asynchronous, so at the time you are instrumenting the Select2 control, treatments is still undefined.

您可以执行以下操作:

$(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

不过，我会执行以下操作.

Better yet though, I would do the following.

最初将treatments设置为一个空数组，并对data选项使用一个函数，因此，如果更改treatments，更改将由Select2控件接收.这样，您可以立即检测Select2控件，然后使用ajax调用返回的数据更新treatments.此外，您可以首先禁用Select2控件，然后在ajax调用返回时启用它.

Initially set treatments to an empty array, and use a function for the data option so if treatments is changed, the changes will be picked up by the Select2 control. That way, you can instrument the Select2 control right away, and then update treatments with the data returned by the ajax call. Additionally, you could initially disable the Select2 control, and then enable it when the ajax call returns.

$(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调用时，您将锁定整个浏览器.

The third option would be to keep your original code, but make the ajax call synchronous. I recommend not doing that though. When you make an ajax call synchronous, you lock up the entire browser.

这篇关于如何通过ajax预加载数组并将其用于select2?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！