本文是Kendo UI AutoComplete的再續(xù)篇，主要介紹模板、數(shù)據(jù)源字段、組件選項等API元素。

headerTemplate String|Function

指定一個靜態(tài)的HTML內(nèi)容，會生成彈出菜單的頁頭。

重要提示：

• 組件沒有為這個頁頭模板傳遞模型數(shù)據(jù)，所以這個選項只適用于靜態(tài)HTML。

示例-指定headerTemplate

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
headerTemplate: '<div><h2>Fruits</h2></div>'
});
</script>

template String|Function

這個template字符串用于生成建議，默認情況下組件只會顯示建議的文本（可通過dataTextFiled進行配置）。

示例-將模板指定為一個函數(shù)

<input id="autocomplete" />
<script id="template" type="text/x-kendo-template">
<span>
<img src="/img/#: id #.png" alt="#: name #" />
#: name #
</span>
</script>
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
template: kendo.template($("#template").html())
});
</script>

示例-將模板指定為一個字符串

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
template: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'
});
</script>

valuePrimitive Boolean(default: false)

當初始化模塊值為空時，為組件指定value binding操作。如果設(shè)置為true， View-Model字段會更新為選中的項目文本字段。如果設(shè)置為false，View-Model字段會更新為選中的項。

示例-指定View-Model字段會更新為選中的項目文本

<input id="autocomplete" data-bind="value: productName, source: products" />

<script>
$("#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);
</script>

Fields

dataSource kendo.data.DataSource

改變數(shù)據(jù)源會反應(yīng)在組件上。

重要提示：

• 用這個選項無法分配新的數(shù)據(jù)源，請用setDataSource方法代替。

示例-添加數(shù)據(jù)項到數(shù)據(jù)源中

<input id="autocomplete" />
<script>
$("#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");
</script>

options Object

這是一個對象，擁有組件所有的選項。

示例-獲取組件的選項

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();

var autocomplete = $("#autocomplete").data("kendoAutoComplete");

var element = autocomplete.element;

var options = autocomplete.options;
</script>

list jQuery

下拉列表元素的jQuery對象

示例-獲取列表元素

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();

var autocomplete = $("#autocomplete").data("kendoAutoComplete");

var list = autocomplete.list;
</script>

ul jQuery

ul元素的jQuery對象，擁有所有可用的選項。

示例-獲取ul元素

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();

var autocomplete = $("#autocomplete").data("kendoAutoComplete");

var ul = autocomplete.ul;
</script>

慧都特邀Kendo UI原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>