Select2 错误 - 无响应

Posted 2023-05-07

【中文标题】Select2 错误 - 无响应

【英文标题】：Select2 errors - no response

【发布时间】：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 输入

【参考方案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】：

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