ASP.NET MVC 使用AutoComplete 自动填充 前端和后端

在网页中使用AutoComplete自动填充的插件很多，使用网络搜索，可以搜到很多jQuery插件，通过本地或者服务器端的JSON数据，可以很轻松地制作出AutoComplete效果出来。

我一开始是找到了jQueryUI，这个插件也很容易上手，前端加几个中文进去测试，结果很快就可以使用。

插件外接js和CSS即可。

当然也支持服务器端的JSON，我们可以在后端做查询并输出JSON，前端代码如下

后端做一个查询，这个和下面的类似，可以参考下面的后端例程。

使用jQueryUI的缺点就是过于庞大，如果你的项目仅仅引用jQueryUI 自动填充而不使用其它jQueryUI 功能的话，会显得很不划算。

我的项目明显折腾不起jQueryUI这么庞大的插件。

那么就只能继续搜索，这个过程其实是有点郁闷的，有的插件太旧了，居然不兼容比较新的Jquery。有的插件不兼容中文。

最后终于找到了jQuery Tokeninput ，这是一个相对较小功能较强大的插件。通过前面的链接下载到jQuery Tokeninput后，打开压缩包，将里面的jquery.tokeninput.js、token-input.css、token-input-facebook.css放到你的项目里面就可以了。

在需要自动填充的页面上，写下如下代码：

$(document).ready(function () {
        $("#token-courseId").tokenInput("/AJAX/Category", { tokenLimit: 1, hintText: "请输入你需要的类目名称", noResultsText: "没有该类目名称", searchingText: "搜索中..." });
    });

在后端代码：

 public JsonResult Category(string q)
        {
            
            object forcn = null;
            if (q.Length > 0)
            {
              forcn= (from d in db.Categories.Where(x=>x.Name.Contains(q)).OrderBy(c => c.Orderby)
                        select new
                        {
                            id = d.CategoryID.ToString(),
                            name = d.Name
                           }).ToList();
            }
            else { 
           forcn = (from d in db.Categories.OrderBy(c => c.Orderby)
                         select new
                         {
                             id=d.CategoryID.ToString(),
                             name = d.Name
                            }).ToList();
            }
            
            return Json(forcn, JsonRequestBehavior.AllowGet);
        }

如果项目不大的话，选择Tokeninput实现自动填充是一个很不错的选择，它还可以实现多选等功能。