MVC下autocomplete插件的使用

浏览数：31 / 时间：2015年06月09日

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

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

MVC下autocomplete插件的使用