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

时间:2015-02-13 11:30:03

标签: ajax jquery-select2

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

2 个答案:

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

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

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