本文是Kendo UIAutoComplete的再续篇,主要介绍模板、数据源字段、组件选项等API元素。
headerTemplate String|Function
指定一个静态的HTML内容,会生成弹出菜单的页头。
重要提示:
示例-指定headerTemplate
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
headerTemplate: 'Fruits
});
template String|Function
这个template字符串用于生成建议,默认情况下组件只会显示建议的文本(可通过dataTextFiled进行配置)。
示例-将模板指定为一个函数
#: name #
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
template:kendo.template($("#template").html())
});
示例-将模板指定为一个字符串
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
template: '
});
valuePrimitive Boolean(default: false)
当初始化模块值为空时,为组件指定value binding操作。如果设置为true, View-Model字段会更新为选中的项目文本字段。如果设置为false,View-Model字段会更新为选中的项。
示例-指定View-Model字段会更新为选中的项目文本
$("#autocomplete").kendoAutoComplete({
valuePrimitive: true,
dataTextField: "name"
});
var viewModel = kendo.observable({
productName: null,
products: [
{ id: 1, name: "Coffee" },
?
{ id: 2, name: "Tea" },
??? {id: 3, name: "Juice" }
? ]
});
?
kendo.bind($("#autocomplete"),viewModel);
Fields
dataSource kendo.data.DataSource
改变数据源会反应在组件上。
重要提示:
示例-添加数据项到数据源中
$("#autocomplete").kendoAutoComplete({
?dataSource: [
??? {name: "Apples" },
??? {name: "Oranges" }
? ],
?dataTextField: "name"
});
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.dataSource.read();
autocomplete.dataSource.add({ name:"Appricot" });
autocomplete.search("A");
options Object
这是一个对象,拥有组件所有的选项。
示例-获取组件的选项
$("#autocomplete").kendoAutoComplete();
?
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
?
var element = autocomplete.element;
?
var options = autocomplete.options;
list jQuery
下拉列表元素的jQuery对象
示例-获取列表元素
$("#autocomplete").kendoAutoComplete();
?
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
?
var list = autocomplete.list;
ul jQuery
ul元素的jQuery对象,拥有所有可用的选项。
示例-获取ul元素
$("#autocomplete").kendoAutoComplete();
?
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
?
var ul = autocomplete.ul;