MVC笔记3:JQuery AutoComplete组件
2015-09-28 11:26
621 查看
1.引入以下js和css
2. html代码如下
3.后台代码如下:
4. js调用代码如下
<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>
相关文章推荐
- jquery multiselect 赋初始值
- 简单易懂的jquery版三级联动select
- 抽奖转盘的jquery实现
- 使用jQuery模拟鼠标点击a标签事件
- JQuery Ajax调用asp.net后台方法
- jquery中^是什么意思
- MVC笔记2:mvc+jquery.validate.js 进行前端验证
- jQuery、layer实现弹出层的打开、关闭
- jQuery源码分析之深入理解jQuery.data,jQuery._data以及data实例函数十八问
- jquery 输入框自动提示
- jquery js 传递对象 数组
- jquery 页面校验器的使用
- jquery validate异步验证时多参数传递
- jQuery实现长按按钮触发事件的方法
- jQueryEasyUI Messager基本使用
- struts2+jquery 实现ajax无刷新更新数据
- jQuery源码分析之proxy函数
- jQuery源码分析之jQuery.makeArray函数
- 源码分析之jQuery.merge函数
- 【jQuery】ajax提交xml