Question

我使用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上查看了其他一些解决方案，并尝试对我的代码进行各种重构以使其工作，但我现在正式用完了想法......希望它能够实现。我错过了一些非常简单的事情。

Answer 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) };
        },
    }
});

Answer 2

尝试删除

placeholder: "Type to select a sponsor",

Answer 3

我的情况是，当我收到此错误时，这是因为即使在我到达最后一页后仍然请求 ajax，通过更正我的 @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { linearLayout.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view12) { try { InputMethodManager inputMethodManager = (InputMethodManager) Objects.requireNonNull(VideoFragment.this.getActivity()).getSystemService(INPUT_METHOD_SERVICE); assert inputMethodManager != null; inputMethodManager.hideSoftInputFromWindow(VideoFragment.this.getActivity().getCurrentFocus().getWindowToken(), 0); } catch (Exception e) { e.printStackTrace(); } } }); } 函数以在最后返回 processResults 属性解决了这个问题页面：

more: false

Answer 4

另一个答案已正确识别了问题。

我在Select2中使用WordPress，并且在data属性中也遇到了问题。文档代码示例对我不起作用。这就是我设法做到的方式。

$(document).ready(function () {
    $('#Spon_Index').select2({
      minimumInputLength: 1,
      multiple: false,
      ajax: {
        url: ajaxurl,
        data: function (params) {
          var query = {
            search: params['term'],
            action: 'your_action'
          }
          return query;
        },
        processResults: function (data, params) {
            var parsed_data = JSON.parse(data);
            return {
                results: parsed_data.results,
                pagination: {
                    more: false
                }
            };
        }
      }
    });
});

这是AJAX中WordPress的经过测试和工作的代码。

Answer 5

对于placeholder错误，我删除了select2中的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 } } } });输入。所以代码是：

{{1}}

Answer 6

对我来说唯一且迅速的解决方案：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 选项对我不起作用（答案中没有其他选项）

Select2错误 - 没有回应

6 个答案: