select2 : 无法读取 null 的属性查询

Question

我已经创建了这样的 javascript

$(document).on("select2:open", ".provider_suggestion", function() {
    $(this).select2({
        minimumInputLength: 2,
        ajax: {
            url: "../include/suggestion/provider_name.php",
            dataType: 'json',
            delay: 250,
            data: function(params){ return { q: params.term }; },
            processResults: function (data, page) { return { results: data }; },
            cache: true
        }
    });
});

并像这样创建选择 html 输入

<select id="c_providers" name="c_providers" class="provider_suggestion" style="width:100%"></select>

当页面加载时，我点击选择输入。

我打开浏览器控制台，上面提到了

未捕获的类型错误：无法读取 null 的属性“查询”

我还是不明白这个问题。

Answer 1

您必须已经在您提供的代码 sn-p 之前的某个地方初始化了 select2，否则我希望 select2:open 侦听器永远不会触发并导致您的问题。当我在小提琴中复制这种情况并偷看 select2 源时，似乎 select2 抱怨 dataAdapter 为空，这一定是这个双重 select2() 调用的副作用，或者 .select2()调用是在具有意外上下文的侦听器内部...或者其他什么，没有时间或兴趣去探究根本原因。

无论如何，将 .select2() 调用移出侦听器（并删除当时为空的侦听器）消除了问题。根据您问题中可用的有限信息，似乎根本不需要使用此侦听器，至少您使用它的方式是这样。 this JSfiddle 中有一个简单的工作示例，与原始代码的唯一真正区别是删除了侦听器包装（以及 AJAX 调用的模拟）。所以，试试类似的东西

$('#c_providers').select2({
    minimumInputLength: 2,
    ajax: {
        url: "../include/suggestion/provider_name.php",
        dataType: 'json',
        delay: 250,
        data: function(params){ return { q: params.term }; },
        processResults: function (data, page) { return { results: data }; },
        cache: true
    }
});

作为此 #c_providers 元素的唯一 select2 初始化。