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





郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。