本节专门为大家介绍 KendoUI AutoComplete 的12个方法。包括关闭、删除、返回、启用/禁用、聚焦、搜索等常规方法。
Methods
close
关闭弹出建议。
示例-关闭弹出建议
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples","Oranges" ]
});
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
// Search for items starting with"A" - will open the suggestion popup and show "Apples"
autocomplete.search("A");
// Close the suggestion popup
autocomplete.close();
</script>
dataItem
在指定索引返回数据项。
参数
index Number(optional)
数据项索引从0开始
Returns
Object 指定索引的数据项。如果索引没有在边界内，返回undefined。
示例-获取某些索引的item
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples","Oranges" ]
});
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
// Search for items starting with"A" - will open the suggestion popup and show "Apples"
autocomplete.search("A");
console.log(autocomplete.dataItem(0)); //Displays "Apples" in the browser console
</script>
destroy
用于安全删除DOM。分离所有事件处理器并删除 jQuery.data 属性，从而避免内存泄露。
重要提示：这个方法不能删除DOM中的组件元素。
示例
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.destroy();
</script>
enable
启用和禁用组件。
参数
enable Boolean
如果设置为true，组件就会启用；反之则被禁用。
示例-启用组件
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
enable: false
});
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.enable(true);
</script>
示例-禁用组件
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.enable(false);
</script>
focus
示例-聚焦于组件
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.focus();
</script>
readonly
切换组件的只读状态，当组件为只读时，不允许用户输入。
重要提示：
禁用和只读模式是有区别的。禁用组件的值不会作为form的一部分，而只读组件是form的一部分。
启用和禁用组件。
参数
readonly Boolean
设置为true时，不允许用户输入；设置为false，允许用户输入
示例-设置为只读模式
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.readonly(true);
</script>
refresh
重新生成一遍items，刷新建议菜单
示例-刷新组件
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.refresh();
</script>
search
搜索指定值的数据源并显示相应的建议。
参数
word String
搜索的值，所有匹配的值都会显示在建议菜单中。
示例-搜索组件
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples","Oranges" ]
});
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.search("A"); //Displays "Apples" in the suggestion popup
</script>
select
选择提供的项目作为一个参数，并更新组件的值。
参数
item String|Element|jQuery
选中的是字符串或者DOM元素或者jQuery对象，一个字符串被视作一个jQuery选择器
示例-选中项目
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "John","Jane" ]
});
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.search("J");
autocomplete.select(autocomplete.ul.children().eq(1));// Selects the second suggestion which is "Jane"
</script>
setDataSource
设置组件的数据源。
参数
dataSource kendo.data.DataSource
组件要绑定的数据源
示例
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples","Oranges" ]
});
var dataSource = newkendo.data.DataSource({
data: [ "Bananas","Cherries" ]
});
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.setDataSource(dataSource);
</script>
suggest
为指定的算法设置组件的值，并选中文本
设置组件的数据源。
参数
value String
要设置的值
示例
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples","Oranges" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.suggest("Apples");
</script>
value
获取或设置组件的值
参数
value String
要设置的值
<inputid="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples","Oranges" ]
});
var autocomplete =$("#autocomplete").data("kendoAutoComplete");
autocomplete.value("Apples");
var value = autocomplete.value();
console.log(value); // Displays"Apples"
</script>