您的位置:首页 > Web前端 > JQuery

MVC笔记3:JQuery AutoComplete组件

2015-09-28 11:26 621 查看
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: