KendoUI系列：AutoComplete

　　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>

　　示例中的远程加载为第一次打开页面即进行加载全部的记录。

　　效果预览：