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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 });
后台Action
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
当下拉的数据较多时,控制高度 并显示滚动条 需要修改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;}