KendoUI系列：AutoComplete

libingql發表於2014-06-09
UI

　　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>

　　示例中的遠端載入為第一次開啟頁面即進行載入全部的記錄。

　　效果預覽：

相關文章