Jquery自动补全插件的使用
1、引入css和js
<script src="js/jquery-ui.min.js"></script> <link href="css/jquery-ui.min.css" rel="stylesheet">
下载地址
https://github.com/xiaorenwu-dashijie/autocomplete.git
2、写input输入框,主要是触发onkeyup事件
<input type="text" class="form-control" id="instiName" name="instiName" onkeyup="findInstiNamesByValue()" placeholder="请输入机构名称" >
3、写方法
function findInstiNamesByValue(){ var instiName = $("#instiName").val(); //获取输入框内容 $( "#instiName" ).autocomplete({ source: '${pageContext.request.contextPath}/findInstiNamesByValue?instiName='+instiName, //请求的url minLength: 1, }); }
注意:jquery中autocomplete方法需要的响应数据是json类型的数组
4、后台代码
a、Controller
/** * 添加数据修复申请时,通过模糊查询自动补全机构名称 * * @param instiName * 输入框中的内容 * @return */ @RequestMapping("/findInstiNamesByValue") public @ResponseBody String[] findInstiNamesByValue(String instiName) { List<String> instiNames = instiDetailService.findInstiNamesByValue("%" + instiName.trim() + "%"); if (CollectionUtils.isEmpty(instiNames)) { return null; } int size = instiNames.size(); String[] arr = (String[]) instiNames.toArray(new String[size]); return arr; }
b、Service
/** * 根据输入框中的汉字查询机构名从而实现自动补全功能 * * @param instiName * @return */ List<String> findInstiNamesByValue(String instiName);
c、Service.impl
@Override public List<String> findInstiNamesByValue(String instiName) { List<String> instiNames = instiDetailMapper.findInstiNamesByValue(instiName); return instiNames; }
d、Mapper
/** * 根据输入框中的汉字查询机构名从而实现自动补全功能 * * @param instiName * @return */ @Select(" select insti_name from insti_detail where insti_name LIKE #{instiName}") List<String> findInstiNamesByValue(String instiName);
PS:不用注解的话,可以用Mapper.xml
<select id="findInstiNamesByValue" resultType="java.lang.String" parameterType="java.lang.String" > select insti_name from insti_detail where insti_name LIKE #{instiName} </select>
5、(模态框)自动补全问题解决
不使用模态窗的时候,autocomplete可以很好的工作,使用模态窗时弹出的选择菜单会被模态窗遮挡。
在文件中添加了下面一段CSS代码,终于成功解决。
<style type="text/css"> .ui-autocomplete{ display:block; z-index:99999; } </style>
Jquery自动补全插件的使用的更多相关文章
- VIM自动补全插件 - YouCompleteMe--"大神级vim补全插件"
VIM自动补全插件 - YouCompleteMe 序言 vim 之所以被称为编辑器之神多半归功于其丰富的可DIY的灵活插件功能,( 例如vim下的这款神级般的代码补全插件YouCompleteMe) ...
- Vimer的福音 新时代的Vim C++自动补全插件 clang_complete
使用vim的各位肯定尝试过各种各样的自动补全插件,比如说大名鼎鼎的 OmniCppComplete .这一类的插件都是对 Ctags 生成的符号表进行字符串匹配来获得可能的补全项.他们在编写 C 代码 ...
- 新时代的Vim C++自动补全插件 clang_complete
Vimer的福音 新时代的Vim C++自动补全插件 clang_complete 使用vim的各位肯定尝试过各种各样的自动补全插件,比如说大名鼎鼎的 OmniCppComplete .这一类的插 ...
- 【转】Vim自动补全插件----YouCompleteMe安装与配置
原文网址:http://www.cnblogs.com/zhongcq/p/3630047.html 使用Vim编写程序少不了使用自动补全插件,在Linux下有没有类似VS中的Visual Assis ...
- Vim自动补全插件----YouCompleteMe安装与配置
Vim自动补全插件----YouCompleteMe安装与配置 使用Vim编写程序少不了使用自动补全插件,在Linux下有没有类似VS中的Visual Assist X这么方便快捷的补全插件呢?以前用 ...
- vim python自动补全插件:pydiction
vim python自动补全插件:pydiction 可以实现下面python代码的自动补全: 1.简单python关键词补全 2.python 函数补全带括号 3.python 模块补全 4.pyt ...
- CentOS7 Vim自动补全插件----YouCompleteMe安装与配置
最近刚装了新系统CentOS7,想要把编码环境配置一下,使用Vim编写程序少不了使用自动补全插件,我以前用的是neocomplcache+code_complete+omnicppcomplete.但 ...
- vim中自动补全插件snipmate使用
vim中自动补全插件snipmate使用 1.下载snipMatezip:https://github.com/msanders/snipmate.vim/archive/master.zip 2.解 ...
- vim自动补全插件YouCompleteMe
前言 Valloric/YouCompleteMe可以说是vim安装最复杂的插件之一,但是一旦装好,却又是非常好用的.YouCompleteMe简称ycm 在安装折腾的过程中,我再一次的体会到,除了官 ...
随机推荐
- https和http共存的nginx简单配置
server{ listen 80; listen 443 ssl; ssl_certificate /usr/local/nginx/ssl/www.demo.com/www.demo.com.cn ...
- Python爬虫入门教程 7-100 蜂鸟网图片爬取之二
蜂鸟网图片--简介 今天玩点新鲜的,使用一个新库 aiohttp ,利用它提高咱爬虫的爬取速度. 安装模块常规套路 pip install aiohttp 运行之后等待,安装完毕,想要深造,那么官方文 ...
- Android--Task和BackStack高级
前言 之前的博客讲到了Android下Activity的启动模式,涉及到了Task和BackStack的内容,对这些不熟悉的朋友,可以先去看看:Android--Activity的启动模式.这篇博客主 ...
- 【Java基础】【21IO(字符流)&字符流其他内容&递归】
21.01_IO流(字符流FileReader) 1.字符流是什么 字符流是可以直接读写字符的IO流 字符流读取字符, 就要先读取到字节数据, 然后转为字符. 如果要写出字符, 需要把字符转为字节再写 ...
- Hbase给初学者的“下马威”
自从成为架构师()之后,李大胖的学习动力似乎少了一些,尤其是今年(当然也有一些客观因素). 临近岁末,内心着实有些惭愧,决定学习一把大数据.跟随一下业界前沿(其实已经不是前沿了),梦想着有一天能够拥有 ...
- Shell从入门到精通进阶之三:表达式与运算符
3.1 条件表达式 表达式 示例 [ expression ] [ 1 -eq 1 ] ` expression ` ` 1 -eq 1 ` test expression test 1 -eq 1 ...
- 通过钩子程序跨程序关闭Window
需求: 在实际场景中会有自身程序在调用第三方的动态库过程中,因为第三方的动态库弹框导致线程阻塞,必须手动将弹窗关闭后才能回到自身程序的主线程中. 最简单的场景就是很多自助设备,本身是没有固定操作员的, ...
- 流式大数据计算实践(4)----HBase安装
一.前言 1.前面我们搭建好了高可用的Hadoop集群,本文正式开始搭建HBase 2.HBase简介 (1)Master节点负责管理数据,类似Hadoop里面的namenode,但是他只负责建表改表 ...
- webpack4.0各个击破(2)—— CSS篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- 事件绑定on与hover事件
今天项目中UI设计了一个鼠标划入和划出的效果,本来这个小效果是非常简单的!可是在实际的生产环境中就出现了一点点问题!因为在实际的环境中,数据全部是用ajax异步加载进去的,这样就造成了hover方法不 ...