首先添加引用

 <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. 第13.4 使用pip安装和卸载扩展模块

    一.pip指令介绍 Python 使用pip来管理扩展模块,包括安装和卸载,具体指令包括: pip install xx: 安装xx模块 pip list: 列出已安装的模块 pip install ...

  2. PyQt(Python+Qt)学习随笔:QListView的gridSize属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListView的gridSize属性用于控制视图中数据项排列所在网格的大小,gridSize默认 ...

  3. JAVA环境安装及其配置

    一.JAVA版本的选择 我使用的是JAVA8,所以这次方法是JAVA8的安装过程. 这里我给出其下载地址,可以自行下载. 链接: https://pan.baidu.com/s/1k2Xydi6FJ2 ...

  4. Centos 7 下的java安装

    安装java 下载jdk的安装包,放到 /usr/local 目录下 创建一个 java 的目录存放 jdk 1 mkdir java 解压java安装包 1 tar -zxvf "jdk名 ...

  5. XSS挑战赛(4)

    16-20关 第十六关 关键代码为: <?php ini_set("display_errors", 0); $str = strtolower($_GET["ke ...

  6. dataframe检查重复值,去重

    flag = df.price.duplicated() # flag = df.duplicated() #参考:https://www.cnblogs.com/trotl/p/11876292.h ...

  7. (干货)构建镜像之Dockerfile

    Dockerfile是一个文本文件,记录了镜像构建的所有步骤. 饭提示:学习Dockerfile构建镜像,就是在学习Dockerfile文件构建的命令+shell脚本语句 Dockerfile简单介绍 ...

  8. tomcat-1-介绍篇

    java语言分为三个体系: javase javaee,是javase的基础 一般就是指jdk javaee java的企业版本 其实是一套规范,就是用java语言做企业开发(目前看来就是开发一些动态 ...

  9. MBR分区表为什么最大只能识别2TB硬盘容量

    1. 前言 最近公司的服务器硬盘坏了,需要换一个新的硬盘,容量是2TB,用的fdisk进行分区,期间搜索分区工具,看到了关于MBR(Master Boot Record)与GPT(GUID parti ...

  10. 配置nginx支持THINKPHP的PATH_INFO

    ThinkPHP支持通过PATHINFO和URL rewrite的方式来提供友好的URL,但是Nginx中默认是不支持PATHINFO的,所以我们需要修改nginx.conf文件. location ...