1、基本使用
<link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
<input class="color" />
<script type="text/javascript">
$(function () {
var data = [
"Orange",
"White",
"Green",
"Gray"
]; $(".color").kendoAutoComplete({
dataSource: data,
filter: "startswith",
placeholder: "Select color...",
separator: "," // 设置separator之后可以选择多个，未设置时只能选择一个。
});
});
</script>
效果预览：
2、构造函数初始化
$("#txtAutoComplete").kendoAutoComplete(["Item1", "Item2", "Item3"]);
或：
var data = ["Item1", "Item2", "Item3"];
$("#txtAutoComplete").kendoAutoComplete({
dataSource: data
});
默认的filter为startswith。
3、加载远程数据
<input id="province" />
<script type="text/javascript">
$(function () {
$("#province").kendoAutoComplete({
dataTextField: "ProvinceName",
dataSource: {
transport: {
read: {
dataType: "json",
url: "/Province/GetProvinceList"
}
}
},
filter: "contains",
placeholder: "--请选择--"
});
});
</script>
示例中的远程加载为第一次打开页面即进行加载全部的记录。
效果预览：