首页 > Web开发 > 详细

Jquery UI Autocomplete 在mvc中应用

时间:2014-02-09 15:31:27      阅读:402      评论:0      收藏:0      [点我收藏+]

首先添加引用

 <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

 

bubuko.com,布布扣
 <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript"></script>
bubuko.com,布布扣


前台js 

bubuko.com,布布扣
 1   $("#kf_webgame").autocomplete({
 2                 source: function (request, response) {
 3                     $.ajax({
 4                         url: "@Url.Action("Search", "Publish")",
 5                         type: "POST",
 6                         dataType: "json",
 7                         data: { keyword: request.term },
 8                         success: function (data) {
 9                             response($.map(data, function (item) {
10                                 return { label: item.text, value: item.value }
11                             }));
12                         }
13                     });
14                 }
15             });
View Code


后台Action

bubuko.com,布布扣
 1  [HttpPost]
 2         public JsonResult Search(string keyword)
 3         {
 4             var apiOpenServer = Microsoft.Practices.ServiceLocation.ServiceLocator.Current.GetInstance<GameList.Services.OpenServer>();
 5             List<Data.sys_Game> list = apiOpenServer.GetGameListByKey(keyword.Trim());
 6 
 7             List<object> items = new List<object>();
 8             items.AddRange(list.Select(m => new
 9             {
10                 text = m.GameName,
11                 value = m.GameName
12             }));
13             return Json(items, JsonRequestBehavior.AllowGet);
14         }
View Code


当下拉的数据较多时,控制高度 并显示滚动条 需要修改jquery-ui.css 的

.ui-autocomplete {max-height: 300px;overflow-y: auto;overflow-x: hidden;}

和jquery.ui.autocomplete.css的

.ui-autocomplete {max-height: 300px;overflow-y: auto;overflow-x: hidden;} 

 

bubuko.com,布布扣

Jquery UI Autocomplete 在mvc中应用

原文:http://www.cnblogs.com/lovewuhan/p/3540444.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!