剑道自动完成配置

Posted 2023-05-07

【中文标题】剑道自动完成配置

【英文标题】：Kendo Autocomplete configuration

【发布时间】：2020-01-17 04:33:11

【问题描述】：

我是第一次尝试 Kendo 自动完成功能，但在配置时遇到了一些问题。

如果我输入 3 个字符并假设我删除文本，它会正常工作 完全来自多选字段，自动完成功能不起作用 直到我刷新页面。

当我们再次输入超过 3 个字符过滤调用 MVC 控制器时，我想避免这种情况，所以不会有很多服务器调用。（换句话说，服务器调用应该只在用户输入 3 个字符和休息时发生过滤应该发生在客户端）

这里是代码

                $scope.selectOptions = 
                    placeholder: "Search...",
                    noDataTemplate: 'No data found',
                    dataTextField: "Name",
                    dataValueField: "Id",
                    valuePrimitive: false,
                    autoBind: false,
                    //filter: "contains",
                    animation: 
                        close: 
                            effects: "fadeOut zoom:out",
                            duration: 300
                        ,
                        open: 
                            effects: "fadeIn zoom:in",
                            duration: 300
                        
                    ,
                    minLength: 3,
                    dataSource: 
                        //type: "odata",
                        serverFiltering: true,
                        serverPaging: true,
                        pageSize: 10,
                        filtering: function (e) 
                            var filter = e.filter;

                            if (!filter.value) 
                                //prevent filtering if the filter does not value
                                e.preventDefault();
                            
                        ,
                        transport: 

                            read: 
                                url: "/Configuration/GetData",
                                type: 'GET',
                                dataType: 'json'
                            ,
                            parameterMap: function (options, type) 
                               if (type === "read") 
                                    var paramMap = kendo.data.transports.odata.parameterMap(options);
                                    delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
                                    delete paramMap.$format; // <-- remove format parameter.
                                   // return paramMap;

                                    return  searchCriteria: options.filter.filters[0].value;
                                 
                            ,
                            schema: 
                                data: function (data) 
                                    return data; // <-- The result is just the data, it doesn't need to be unpacked.
                                ,
                                total: function (data) 
                                    return data.length; // <-- The total items count is the data length, there is no .Count to unpack.
                                
                            
                        


                    
                ;
            $scope.selectedIds = [1, 2];

<select kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds" k-min-length="3" class="form-control"></select>

【参考方案1】：

将自动完成的数据源设置为不会从服务器获取任何内容的 localDataSource：

const externalDataSource = ... // what you have now
const localDataSource = new kendo.data.DataSource()
externalDataSource.bind("change", (e) => 
    localDataSource.data(e.sender.data())
)
externalDataSource.read()

【讨论】：

谢谢。由于 Kendo 没有 dataValueField，我正在尝试使用以下方法来获取选定的 id，但如果我在 Multiselect 中选择多个选项，它似乎不起作用。我如何获得多个 ID？

选择：函数（e） e.dataItem.Id

我没有用Angular，但是有一个valueField：telerik.com/kendo-angular-ui/components/dropdowns/multiselect/…