KendoUI 自动完成分页问题答案

【问题标题】：KendoUI Autocomplete paging issueKendoUI 自动完成分页问题
【发布时间】：2014-01-17 12:05:49
【问题描述】：

我有一个绑定到 KendoUI 自动完成小部件的文本框。 JS 代码如下所示：

        var dataSourceImeSearch = {
            type: "json",
            transport: {
                read: {
                    url: "@Url.Action("ImeSearch")",
                    contentType: "application/json; charset=utf-8",
                    type: "POST"
                },
                parameterMap: function (data, type) {
                    if (type == "read") {

                        if (data.filter) {
                            data = $.extend({ sort: null, filter: data.filter.filters[0] }, data);
                        } else {
                            data = $.extend({ sort: null, filter: null }, data);
                        }

                        return JSON.stringify(data);
                    } else {
                        return JSON.stringify({ model: data });
                    }
                }
            },
            batch: false,
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            schema: {
                errors: "Errors",
                data: "Data",
                total: "TotalRecordCount",
                model: myModel
            },
            error: function (e) {
                if (e.errors) {
                    alert(e.errors);
                }
            }
        };

        $("#Ime").kendoAutoComplete({
            dataTextField: "PunoIme",
            filter: "contains",
            minLength: 3,
            dataSource: dataSourceImeSearch
        });

我在这里遇到了一件奇怪的事情。自动完成的工作方式是，当我键入第三个字符时，它会运行到服务器并从那里取回 JSON 数据并显示前十个结果。问题是这个文本框正在搜索大型数据集，因此对于某些具有 4 个字符的查询，结果集可能超过 1000 个项目。由于某种原因，该小部件无法确定有超过 10 个结果，并且当我在显示的自动完成下拉列表中向下滚动时，它不会触发对第二页的任何搜索，依此类推。您可以看到数据源的serverPaging 设置为true，但这无济于事。

感谢任何帮助。谢谢。

【问题讨论】：

标签： autocomplete kendo-ui

【解决方案1】：

我在发布此问题后发现自动完成小部件不允许按设计分页。一些 Kendo 员工在 KendoUI 论坛中对此进行了解释，作为糟糕的 UX 示例（如果您有需要分页的自动完成功能）。我会争辩说，因为在我看来，自动完成的第一个用例是搜索一个人的情况，而我正在这样做。唯一的问题是，如果您按人的第二个名字进行搜索，在前 3 或 4 个字符之后可能会得到数百个结果，而您确实需要为此分页。如果剑道人认为这是一个糟糕的 UX 案例，这应该在 Autocomplete 文档中明确提及，而我真的找不到任何地方提到它，人们会认为它可能是一个好的向人们提及这样的事情的想法，这样他们就不必浪费一整天试图找出问题所在。

在我看来，在 KendoUI 网页演示页面的所有演示中，最糟糕的用例示例之一是 Shared DataSource 示例，如果您在顶部的自动完成文本框中输入“ch”，您将得到 10导致自动完成，但在下面的数据网格中有 14 个。剑道界没有人认为这种行为很奇怪，这让我觉得很愚蠢。

所以我对自己问题的回答如下：不要使用自动完成，除非在一些非常简单的用例中（我真的想不出一个有意义的用例）。我最终制作了一个带有 5 个文本框和搜索按钮的完整搜索表单，以防我希望能够使用 2 个文本框（一个带有自动完成功能）和一个搜索按钮。

【讨论】：

我同意，在某些情况下，您可能希望在列表底部添加“显示更多结果”选项。用户体验好不好是见仁见智，剑道根据自己的意见省略支持似乎有点自大。您可以查看的另一种选择是 Select2，它确实支持“无限滚动”，因为他们称之为 ivaynberg.github.io/select2/#infinite

【解决方案2】：

你设置了pageSize:10，也就是说AutoComplete只返回10条记录，它的dataSource只包含10个元素，恐怕默认没有实现自动分页

【讨论】：