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 

  $("#kf_webgame").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "@Url.Action("Search", "Publish")",
                        type: "POST",
                        dataType: "json",
                        data: { keyword: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.text, value: item.value }
                            }));
                        }
                    });
                }
            });

后台Action

 [HttpPost]
        public JsonResult Search(string keyword)
        {
            var apiOpenServer = Microsoft.Practices.ServiceLocation.ServiceLocator.Current.GetInstance<GameList.Services.OpenServer>();
            List<Data.sys_Game> list = apiOpenServer.GetGameListByKey(keyword.Trim());

            List<object> items = new List<object>();
            items.AddRange(list.Select(m => new
            {
                text = m.GameName,
                value = m.GameName
            }));
            return Json(items, JsonRequestBehavior.AllowGet);
        }

当下拉的数据较多时，控制高度 并显示滚动条 需要修改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;}