时间戳

首页 > 解决方案 > Kendo UI：自动完成自定义过滤事件

typescript - Kendo UI：自动完成自定义过滤事件

问题描述

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

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

  1. 在没有数据的情况下初始化 Kendo 自动完成控件。
  2. 构建自定义过滤事件处理程序，它将输入的值作为关键字传递给 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 控件。

标签： typescriptkendo-ui

解决方案

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

推荐阅读