Kendo UI API中文介绍二:AutoComplete (3)

原创|使用教程|编辑:我只采一朵|2014-05-20 11:20:05.000|阅读 1186 次

概述:本文是Kendo UI AutoComplete的再续篇,主要介绍模板、数据源字段、组件选项等API元素。

相关链接:

本文是Kendo UI AutoComplete的再续篇,主要介绍模板、数据源字段、组件选项等API元素。

headerTemplate String|Function

指定一个静态的HTML内容,会生成弹出菜单的页头。

重要提示:

  • 组件没有为这个页头模板传递模型数据,所以这个选项只适用于静态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进行配置)。

示例-将模板指定为一个函数

<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操作。如果设置为true, View-Model字段会更新为选中的项目文本字段。如果设置为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

改变数据源会反应在组件上。

重要提示:

  • 用这个选项无法分配新的数据源,请用setDataSource方法代替。

示例-添加数据项到数据源中

<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原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:APIKendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

购物车 在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat