本文是Kendo UIAutoComplete的续篇,主要介绍数据源、搜索、占位符等API元素。
dataSourceObject|Array|kendo.data.DataSource
如果 dataSource选项设置为JavaScript对象或数组,组件会初始化一个新的kendo.data.DataSource。如果dataSource选项是当前存在的kendo.data.DataSource,组件会继续沿用这个数据源,而不会重新初始化。
示例:将数据源设置为JavaScript对象
$("#autoComplete").kendoAutoComplete({
?dataSource: {
???data: ["One", "Two"]
? }
});
示例:将数据源设置为JavaScript数组
var data = ["One","Two"];
$("#autoComplete").kendoAutoComplete({
?dataSource: data
});
示例:当前存在的数据源
var dataSource = newkendo.data.DataSource({
?transport: {
???read: {
?????url: "http://demos.telerik.com/kendo-ui/service/products",
?????dataType: "jsonp"
??? }
? }
});
$("#autocomplete").kendoAutoComplete({
?dataSource: dataSource,
?dataTextField: "ProductName"
});
dataTextField String(default: null)
这个字段会用在搜索建议时。
示例:设置dataTextField
var data = [
? {id: 1, name: "Apples" },
? {id: 2, name: "Oranges" }
];
$("#autocomplete").kendoAutoComplete({
?dataTextField: "name", // The widget is bound to the"name" field
?dataSource: data
});
delay Number(default: 200)
当发生键盘1敲击事件时组件会弹出建议窗口
示例:设置显示
$("#autocomplete").kendoAutoComplete({
?delay: 500
});
enable Boolean(default: true)
如果设置为false,组件会被禁用,用户将无法输入。但默认情况下这个组件是true。
示例:禁用组件
$("#autocomplete").kendoAutoComplete({
?enable: false
});
filter String(default:"startswith")
这个筛选方法用于决定当前值的建议,默认值是"startswith",另外还有endswith 和 contains.
示例:设置过滤器
$("#autocomplete").kendoAutoComplete({
?filter: "contains"
});
height Number(default: 200)
示例:设置高度
$("#autocomplete").kendoAutoComplete({
?height: 500
});
highlightFirst Boolean(default: true)
如果设置为true,第一个建议会自动设置为高亮。
示例:设置highlightFirst
$("#autocomplete").kendoAutoComplete({
?highlightFirst: false
});
ignoreCase Boolean(default: true)
默认情况下组件的搜索是区分大小写的。
示例:禁用不区分大小写的建议
$("#autocomplete").kendoAutoComplete({
?ignoreCase: false
});
minLength Number(default: 1)
用户在执行搜索之前就必须键入元素的最小值,如果搜索结果匹配值太多,可以将值设置高一点(大于1)。
示例:设置最小高度
$("#autocomplete").kendoAutoComplete({
?minLength: 3
});
placeholder String(default:"")
当提示为空时会显示占位符,默认情况下无设置。
示例:指定占位符
$("#autocomplete").kendoAutoComplete({
?placeholder: "Enter value ..."
});
Kendo UI AutoComplete组件还可以使用HTML属性作为占位符提示。
示例:使用占位符HTML属性
$("#autocomplete").kendoAutoComplete();
separator String(default: "")
示例:设置多个值之间的分隔符
$("#autocomplete").kendoAutoComplete({
?separator: ", "
});
suggest Boolean(default: false)
如果设置为true,组件会自动使用第一个建议作为它的值。
示例:启用自动建议
$("#autocomplete").kendoAutoComplete({
?suggest: true
});