KendoUI系列：AutoComplete

<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>

<input id="province" />

<script type="text/javascript">
    $(function () {
        $("#province").kendoAutoComplete({
            dataTextField: "ProvinceName",
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/Province/GetProvinceList"
                    }
                }
            },
            filter: "contains",
            placeholder: "--请选择--"
        });
    });
</script>