【问题标题】:AJAX results issue - Data.Results is UndefinedAJAX 结果问题 - Data.Results 未定义
【发布时间】:2013-01-09 01:44:56
【问题描述】:

我正在尝试将 Select2 设置为使用 Ajax,但我被卡住了。我已经在 IE 中调试并确认我的 AJAX 正在返回结果,所以这似乎不是问题。输入框会加载,但是当我在“牛奶”中输入“mi”时,它只会说“正在搜索...”,但从来没有找到任何东西!

这是我的 Jquery:

        $(document).ready(function () {
            $('#e1').select2({
                placeholder: "Select an ingredient...",
                minimumInputLength: 2,
                ajax: {
                    url: "../api/IngredientChoices",
                    dataType: "jsonp",
                    quietMillis: 500,
                    data: function (term, page) {
                        return {
                            q: term,
                            page_limit: 10,
                            page: page

                        };
                    },
                    results: function (data, page) {
                        var more = (page * 10) < data.total;
                        return {
                            results: data.MainName, more:more
                        }

                    }
                }
            });
        });

JSON:

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]

HTML:

<td><input type="hidden" id="e1" /></td>

如果我将 dataType 更改为只是 json,当我在框中键入“mi”时会出现另一种错误。

这是工作版本的最终代码:

            $('#e1').select2({
                placeholder: "Select an ingredient...",
                minimumInputLength: 2,
                ajax: {
                    url: "../api/IngredientChoices",
                    dataType: "json",
                    quietMillis: 500,
                    data: function (term, page) {
                        return {
                            q: term,
                            page_limit: 10,
                            page: page

                        };
                    },
                    results: function (data, page) {
                        var more = (page * 10) < data.length;
                        console.log(more);
                        console.log(data);
                        return { results: data, more: more };

                    },
                    formatResult: function (post) {
                        markup = '<strong>' + post.text + '</strong>';
                    }
                }
            });

【问题讨论】:

  • jsonp 用于传出 ajax 调用.../api/IngredientChoices 是您的本地 url?那么我认为您只需要数据类型 json
  • 啊,我不确定 JSON 和 JSONP 之间的区别。使用 JSON,我仍然在我附加的屏幕截图中收到错误。

标签: ajax json jquery jquery-select2


【解决方案1】:

您遇到的错误似乎与您获得的结果格式有关。 Select2 的预期结果是具有 id: 和 text: 属性的对象的集合。

[{ id: 1, text: 'String' }, { id: 2, text: 'Other String.'}]

【讨论】:

  • 你是对的,我需要将我的 JSON 输出更改为具有 id 和 text 并且它有效。此外,我必须将结果更改为数据。我已经在上面为其他人发布了我更正的代码。
  • json字段名是怎么改成文本的??我遇到过类似的问题,只是我无法将我的一个字段名称('email')转换为'text'
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-01
  • 1970-01-01
  • 2016-10-05
  • 1970-01-01
  • 2023-03-17
相关资源
最近更新 更多