MVC下autocomplete插件的使用

来源：互联网发布：不宜乐乎的乐怎么读编辑：程序博客网时间：2024/05/02 01:04

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);        }

3 0