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

原创|使用教程|编辑:我只采一朵|2014-05-19 09:48:45.000|阅读 2383 次

概述:本文是Kendo UI AutoComplete的续篇,主要介绍数据源、搜索、占位符等API元素。

相关链接:

本文是Kendo UI AutoComplete的续篇,主要介绍数据源、搜索、占位符等API元素。

dataSource Object|Array|kendo.data.DataSource

如果 dataSource选项设置为JavaScript对象或数组,组件会初始化一个新的kendo.data.DataSource。如果dataSource选项是当前存在的kendo.data.DataSource,组件会继续沿用这个数据源,而不会重新初始化。

示例:将数据源设置为JavaScript对象

<input id="autocomplete" />
<script>
$("#autoComplete").kendoAutoComplete({
  dataSource: {
    data: ["One", "Two"]
  }
});
</script>

示例:将数据源设置为JavaScript数组

<input id="autocomplete" />
<script>
var data = ["One", "Two"];
$("#autoComplete").kendoAutoComplete({
  dataSource: data
});
</script>

示例:当前存在的数据源

<input id="autocomplete" />
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp"
    }
  }
});
$("#autocomplete").kendoAutoComplete({
  dataSource: dataSource,
  dataTextField: "ProductName"
});
</script>

dataTextField String(default: null)

这个字段会用在搜索建议时。

示例:设置dataTextField

<input id="autocomplete" />
<script>
var data = [
  { id: 1, name: "Apples" },
  { id: 2, name: "Oranges" }
];
$("#autocomplete").kendoAutoComplete({
  dataTextField: "name", // The widget is bound to the "name" field
  dataSource: data
});
</script>

delay Number(default: 200)

当发生键盘1敲击事件时组件会弹出建议窗口

示例:设置显示

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  delay: 500
});
</script>

enable Boolean(default: true)

如果设置为false,组件会被禁用,用户将无法输入。但默认情况下这个组件是true。
示例:禁用组件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  enable: false
});
</script>

filter String(default: "startswith")

这个筛选方法用于决定当前值的建议,默认值是"startswith",另外还有endswith 和 contains.

示例:设置过滤器

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  filter: "contains"
});
</script>

height Number(default: 200)

示例:设置高度

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  height: 500
});
</script>

highlightFirst Boolean(default: true)

如果设置为true,第一个建议会自动设置为高亮。

示例:设置highlightFirst

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  highlightFirst: false
});
</script>

ignoreCase Boolean(default: true)

默认情况下组件的搜索是区分大小写的。

示例:禁用不区分大小写的建议

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  ignoreCase: false
});
</script>

minLength Number(default: 1)

用户在执行搜索之前就必须键入元素的最小值,如果搜索结果匹配值太多,可以将值设置高一点(大于1)。

示例:设置最小高度

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  minLength: 3
});
</script>

placeholder String(default: "")

当提示为空时会显示占位符,默认情况下无设置。

示例:指定占位符

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  placeholder: "Enter value ..."
});
</script>

Kendo UI AutoComplete组件还可以使用HTML属性作为占位符提示。

示例:使用占位符HTML属性

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

separator String(default: "")

示例:设置多个值之间的分隔符

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  separator: ", "
});
</script>

suggest Boolean(default: false)

如果设置为true,组件会自动使用第一个建议作为它的值。

示例:启用自动建议

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  suggest: true
});
</script>
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui线下培训



标签:APIKendoUI

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

文章转载自:慧都控件

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
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