Kendo 自动完成配置
Kendo Autocomplete configuration
我第一次尝试 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>
将自动完成的数据源设置为不从服务器获取任何内容的本地数据源:
const externalDataSource = {...} // what you have now
const localDataSource = new kendo.data.DataSource()
externalDataSource.bind("change", (e) => {
localDataSource.data(e.sender.data())
})
externalDataSource.read()
我第一次尝试 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>
将自动完成的数据源设置为不从服务器获取任何内容的本地数据源:
const externalDataSource = {...} // what you have now
const localDataSource = new kendo.data.DataSource()
externalDataSource.bind("change", (e) => {
localDataSource.data(e.sender.data())
})
externalDataSource.read()