Jquery UI Autocomplete 在mvc中应用

首先添加引用

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

 

 <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>


前台js 

 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

 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;} 

 

 

posted @ 2014-02-08 14:41  帅帅~~~  阅读(337)  评论(1)  编辑  收藏  举报