Kendo UI：自动完成自定义过滤事件答案

【问题标题】：Kendo UI: Autocomplete Custom filtering eventKendo UI：自动完成自定义过滤事件
【发布时间】：2019-11-12 04:25:46
【问题描述】：

我正在尝试使用 Kendo UI 自动完成组件创建寻人控件。

此自动完成组件从 3rd 方产品获取数据源，该产品的 API 设计非常糟糕，无法吸引用户。没有 GET 端点会返回所有用户，但 API 只有一个搜索端点，我可以在其中提供关键字，它将返回与该关键字匹配的所有用户。因此，如果我需要从用户存储中获取所有用户，我需要发送 26 个（每个字母一个）发布请求并将结果合并到一个集合并将其传递给 Kendo 自动完成数据源。这使得页面非常慢。所以我尝试了以下方法：

在没有数据的情况下初始化 Kendo 自动完成控件。
构建自定义过滤事件处理程序，它将输入的值作为关键字传递给POST端点进行搜索，一旦获得用户列表，绑定控件的数据源。

 $("#pplFinderCtrl").kendoAutoComplete({
                dataSource:{
                    serverFiltering:true
                },
                dataTextField:"Name",
                filter: "contains",
                placeholder: "Officer",
                filtering:async function(e){
                    var value:string = <string>$("#pplFinderCtrl").val();
                     console.log(value);
                     const users:User[]=await ProfileService.searchUser(value.toString());
                     let ddl: any=  $("#pplFinderCtrl").data("kendoAutoComplete");
                     ddl.setDataSource(users);
                     console.log(users);
                }
            });

如果用户键入速度很慢，这很有效，但是当用户键入速度很快并且绑定后自动完成面板不会显示基于绑定到它的新数据的结果。最后一个按键的结果只有在按下下一个按键后才会出现在面板中。

我已经看到了 Kendo 服务器过滤选项，但我想在从 API 接收数据后对数据进行一些清理，然后再传递给 kendo 控件。

【问题讨论】：

标签： typescript kendo-ui

【解决方案1】：

根据我对您的问题的理解，我认为您应该从 API 中进行初始提取，然后将其放入您自己的数据库中，然后创建自己的方法来查找用户。当我使用 kendoAutoComplete 时，当我快速键入时，它的响应速度并不快，因此这可能只是组件的限制，而不是因为您的 get 请求。

【讨论】：