首先添加引用

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

后台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 }

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

Jquery UI Autocomplete 在mvc中应用的更多相关文章

  1. Node.js配合jQuery UI autocomplete的应用

    Node.js擅长的领域为: 不需要很多运算 吞吐量要求高 进消息轻并且要求快 出消息轻并且要求快 网上的例子都是socket.io的,我一直在想到底能用在什么地方?根据node.js的优点(擅长领域 ...

  2. jquery ui autocomplete 实现点击文本框,出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  3. jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  4. jQuery UI Autocomplete是jQuery UI的自动完成组件(share)

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  5. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  6. jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框

    $("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...

  7. jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList

    0.引言   1.起因                  一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...

  8. jQuery UI Autocomplete是jQuery UI的自动完成组件

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

  9. jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...

随机推荐

  1. python接口自动化测试框架(post提交添加变量)

    1.python接口测试框架包含哪几部分 数据源-> GET/POST 发送请求->接收返回结果->断言测试结果->生成测试报告(html报告)->网页报告 2.pyth ...

  2. PC微信[多开+免扫码+防撤回撤回提示+转存语音+自动收款+远程命令]

    PC端微信玩出了新花样,主要技术为Hook技术 有兴趣的小伙伴可以去了解下hook钩子技术 版本介绍: 增加转存语音到MP3(保存你重要的语音数据) 增加表图转存; 增加自动收转账和自动回复; 增加远 ...

  3. .NET Core集成Seq+Serilog实现日志中心

    .NET Core集成Seq+Serilog实现日志中心 一,下载安装Seq https://datalust.co/download/all,版本很多,大家随便挑,开发版个人免费,商业版多账号需要收 ...

  4. 箭头函数this指向问题

    this指向本质 箭头函数this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this.正是因为它没有this ...

  5. OpenCV Error: Assertion failed (src.size == dst.size && src.channels() == dst.channels()) in cvConvertScale

    发现问题:在做kinect采集的深度图去噪的时候遇到了cvConvertScale格式转换的问题. OpenCV Error: Assertion failed (src.size == dst.si ...

  6. Happens-Before原则到底规定了什么

    Happens-Before 规则 如何理解 Happens-Before 呢?如果望文生义(很多网文也都爱按字面意思翻译成"先行发生"),那就南辕北辙了,Happens-Befo ...

  7. 加快Linux上yum下载安装包的速度(以CentOS 7,安装gcc为例)

    今天在学习Linux的过程中,学到了关于包的安装问题:rpm包管理和yum在线管理两种方式:这里因为我在实验yum安装gcc出现了网速超级慢的问题,于是搜索解决方案,重新配置repo得以解决,记录整个 ...

  8. [日常摸鱼]bzoj1502[NOI2005]月下柠檬树-简单几何+Simpson法

    关于自适应Simpson法的介绍可以去看我的另一篇blog http://www.lydsy.com/JudgeOnline/problem.php?id=1502 题意:空间里圆心在同一直线上且底面 ...

  9. 线段树入门详解,洛谷P3372 【模板】线段树 1

    关于线段树: 本随笔参考例题      P3372 [模板]线段树 1 所谓线段树就是把一串数组拆分成一个一个线段形成的一棵树. 比如说像这样的一个数组1,2,3,4,5: 1 ~ 5 /       ...

  10. Python高级语法-对象实例对象属性-Property总结(4.6.2)

    @ 目录 1.说明 2.代码 关于作者 1.说明 property属性,返回的是值 不是callable的,也就是不能使用方法来调用 只能传入self,不能传入其他 用处,能返回局部数据,比如当分页的 ...