本文是Kendo UIAutoComplete的再續(xù)篇,主要介紹模板、數(shù)據(jù)源字段、組件選項(xiàng)等API元素。
headerTemplate String|Function

指定一個(gè)靜態(tài)的HTML內(nèi)容,會(huì)生成彈出菜單的頁(yè)頭。
重要提示:
示例-指定headerTemplate
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
headerTemplate: 'Fruits
});
template String|Function
這個(gè)template字符串用于生成建議,默認(rèn)情況下組件只會(huì)顯示建議的文本(可通過(guò)dataTextFiled進(jìn)行配置)。
示例-將模板指定為一個(gè)函數(shù)

#: name #
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
template:kendo.template($("#template").html())
});
示例-將模板指定為一個(gè)字符串
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
template: '
});
valuePrimitive Boolean(default: false)
當(dāng)初始化模塊值為空時(shí),為組件指定value binding操作。如果設(shè)置為true, View-Model字段會(huì)更新為選中的項(xiàng)目文本字段。如果設(shè)置為false,View-Model字段會(huì)更新為選中的項(xiàng)。
示例-指定View-Model字段會(huì)更新為選中的項(xiàng)目文本
$("#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
改變數(shù)據(jù)源會(huì)反應(yīng)在組件上。
重要提示:
示例-添加數(shù)據(jù)項(xiàng)到數(shù)據(jù)源中
$("#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
這是一個(gè)對(duì)象,擁有組件所有的選項(xiàng)。
示例-獲取組件的選項(xiàng)
$("#autocomplete").kendoAutoComplete();
?
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
?
var element = autocomplete.element;
?
var options = autocomplete.options;
list jQuery
下拉列表元素的jQuery對(duì)象
示例-獲取列表元素
$("#autocomplete").kendoAutoComplete();
?
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
?
var list = autocomplete.list;
ul jQuery
ul元素的jQuery對(duì)象,擁有所有可用的選項(xiàng)。
示例-獲取ul元素
$("#autocomplete").kendoAutoComplete();
?
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
?
var ul = autocomplete.ul;
京ICP備09015132號(hào)-996 | 違法和不良信息舉報(bào)電話:4006561155
© Copyright 2000-2026 北京哲想軟件有限公司版權(quán)所有 | 地址:北京市海淀區(qū)西三環(huán)北路50號(hào)豪柏大廈C2座11層1105室
北京哲想軟件集團(tuán)旗下網(wǎng)站:哲想軟件 | 哲想動(dòng)畫(huà)