首页 > 代码库 > KendoUI系列:AutoComplete
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、加载远程数据
<input id="province" />
<script type="text/javascript"> $(function () { $("#province").kendoAutoComplete({ dataTextField: "ProvinceName", dataSource: { transport: { read: { dataType: "json", url: "/Province/GetProvinceList" } } }, filter: "contains", placeholder: "--请选择--" }); }); </script>
效果预览:
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。