首页 > 代码库 > 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插件的使用