首页 > 代码库 > MVC下autocomplete插件的使用
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=http://www.mamicode.com/"@Url.Content("~/Content/autocomplete/jquery.autocomplete.js")" type="text/javascript"></script>>
前端页面只需要添加一个文本框,代码如下:<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); }
MVC下autocomplete插件的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。