世俱杯 2025

本文是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: "//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原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>