码迷,mamicode.com
首页 > Web开发 > 详细

MVC笔记3:JQuery AutoComplete组件

时间:2015-09-28 13:14:35      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

1.引入以下js和css

  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" 
        type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" 
        type="text/css" />
 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
        type="text/javascript"></script>

     <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"
        type="text/javascript"></script>

2.  html代码如下 

<input type="text" id="t" name="t" data-autocomplete-source="@Url.Action("News","AutoComplete")" />

3.后台代码如下:

   public ActionResult News()
        {
            var list = db.Artists.Select(m => new { value=m.Name}).ToList();

            return Json(list,JsonRequestBehavior.AllowGet);
        }

4. js调用代码如下

<script type="text/ecmascript">

    $("#t").each(function () {
        var target = $(this);
        target.autocomplete({ source: target.attr("data-autocomplete-source") });

    })

</script>

 

MVC笔记3:JQuery AutoComplete组件

标签:

原文地址:http://www.cnblogs.com/tiancai/p/4843626.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!