Select2 错误 - 无响应答案

【问题标题】：Select2 errors - no responseSelect2 错误 - 无响应
【发布时间】：2015-08-09 16:24:29
【问题描述】：

我正在使用 Select2 在我的页面上提供动态选择功能。

这里是代码：-

$("#Spon_Index").select2({
    placeholder: "Type to select a sponsor",
    minimumInputLength: 3,
    multiple: false,
    width: 400,
    ajax: {
        url: "../control/autocomplete_sponsor.aspx",
        data: function(term) {
            return term;
        },
        results: function(data, page) {
            alert(results);
            return {
                results: data
            }
        },
        formatResult: function(data) {
            return data.text;
        },
        formatSelection: function(data) {
            return data.id;
        },
        escapeMarkup: function(m) {
            return m;
        }
    }
});

使用 Fiddler，我可以看到我从 autocomplete_sponsor.aspx 获得了正确的返回，例如：-

[{"id":"12","text":"Smiths"},{"id":"118","text":"Dr Smiths"}]

但是，控件根本没有发生任何事情。它要么挂在“搜索”上，要么什么都没有……我检查了开发人员工具，但有一个错误：-

Uncaught TypeError: Cannot read property 'slice' of undefined

我查看了一些关于 SO 的其他解决方案，并尝试对我的代码进行各种重构以使其正常工作，但我现在已经正式用完了想法......希望这是我错过的非常简单的事情.

【问题讨论】：

如果您可以包含该错误的回溯，它可能会提供一些关于问题所在的洞察力。
只需删除 select2 中的 placeholder 选项并将其添加到您的 select 输入

标签： javascript jquery jquery-select2

【解决方案1】：

Select2 似乎只需要一个 Javascript 对象而不是 JSON 字符串。以下代码适用于 select2 v4.0.3，因此 results 已替换为 processResults。

$("#Spon_Index").select2({
    placeholder: "Type to select a sponsor",
    minimumInputLength: 3,
    multiple: false,
    width: 400,
    ajax: {
        url: "../control/autocomplete_sponsor.aspx",
        data: function(term) {
            return term;
        },
        processResults: function(data, page) {
            return { results: JSON.parse(data) };
        },
    }
});

【讨论】：

【解决方案2】：

对于Uncaught TypeError: Cannot read property 'slice' of undefined 错误，我删除了select2 中的placeholder 选项并将其设置为我的select 输入。所以代码是：

$("#Spon_Index").select2({
    minimumInputLength: 3,
    multiple: false,
    width: 400,
    ajax: {
        url: "../control/autocomplete_sponsor.aspx",
        dataType: 'json',
        data: function(term) {
            return term;
        },
        results: function(data) {
            return {
                results: data
            }
        }
    }
});

【讨论】：

您可以在您的选择输入中设置它，而不是在 jQuery 代码中。 <select placeholder="placeholder text"></select>
我在 react 中使用它，这意味着我没有 HTML 标签而是一个组件。

【解决方案3】：

当我遇到此错误时，我的情况是因为即使在我到达最后一页后仍请求 ajax，通过更正我的 processResults 函数以在最后一页返回 more: false 属性来解决它：

 return {
          results: [some data from my API...],
          pagination: {
            more: false, // if all data has been returned
          },
        }

【讨论】：

【解决方案4】：

尝试删除

placeholder: "Type to select a sponsor",

【讨论】：

和去年angela.mirjalili的评论里说的一样

【解决方案5】：

只为我提供及时的解决方案：https://github.com/select2/select2/issues/2950#issuecomment-70927064

...您没有返回带有关键结果的对象

所以，如果你可以修改 api（后端是你的），最简单的方法是这样发回你的数据：

{
    results: [
        {
            id: 5,
            text: 'something'
        },
        {
            ...
        }
    ]
}

...无论如何，在 js 端转换你的数据，基于此： https://select2.org/data-sources/ajax#transforming-response-data

...但是@Kevin Dimey 使用processResults 选项的答案对我不起作用（并且没有其他答案）

【讨论】：

【解决方案6】：

删除占位符为我解决了这个问题

【讨论】：