MVC下autocomplete插件的使用
Autocomplete插件的功能类似于Google Suggest 功能,可以在用户输入查询条件的时候,自动提示用户若干词条,方便用户快速查询。下面我们介绍下autocomplete插件如何在MVC下面使用。
首先,需要下载autocomplete插件,其下载地址是:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
其次,需要在页面上引入两个文件(jquery文件除外),分别是jquery.autocomplete.js 和jquery.autocomplete.css,代码如下:
<script src="@Url.Content("~/Content/autocomplete/jquery.autocomplete.js")" type="text/javascript"></script> <link href="@Url.Content("~/Content/autocomplete/jquery.autocomplete.css")" rel="stylesheet"type="text/css" />
前端页面只需要添加一个文本框,代码如下:
<input type="text" name="HigherUserID" id="HigherUserID" />
需要编写的js代码如下所示:
<script type="text/javascript"> $(function () { $("#HigherUserID").autocomplete("/User/GetUserByUserName", { dataType: "json", minChars: 0, width: 200, showName: "TrueName", selfAction: SalesDeleteName, cacheLength: 0, autoFill: false, formatItem: function(row, i, max) { return i + "/" + max + ": \"" + row.TrueName + "\" [" + row.UserCode + "]"; }, formatResult: function(row) { return row.TrueName; } }).result(function(event, row) { }); }) </script>
后台代码为根据条件检索人员信息,分页显示,返回给前端一个json数据:
public ActionResult GetUserByUserName(string q) { int _totalCount = 0; QueryUser query = new QueryUser(); query.truename = q; query.state = "0"; var userlist = UserService.GetUsersByPage(query, 10, 1, out _totalCount); IList<UserInfo> users = userlist.ToList<UserInfo>(); return Json(users, JsonRequestBehavior.AllowGet); }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。