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>

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

　　效果预览：