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自动补全插件的使用的更多相关文章

  1. VIM自动补全插件 - YouCompleteMe--"大神级vim补全插件"

    VIM自动补全插件 - YouCompleteMe 序言 vim 之所以被称为编辑器之神多半归功于其丰富的可DIY的灵活插件功能,( 例如vim下的这款神级般的代码补全插件YouCompleteMe) ...

  2. Vimer的福音 新时代的Vim C++自动补全插件 clang_complete

    使用vim的各位肯定尝试过各种各样的自动补全插件,比如说大名鼎鼎的 OmniCppComplete .这一类的插件都是对 Ctags 生成的符号表进行字符串匹配来获得可能的补全项.他们在编写 C 代码 ...

  3. 新时代的Vim C++自动补全插件 clang_complete

    Vimer的福音 新时代的Vim C++自动补全插件 clang_complete   使用vim的各位肯定尝试过各种各样的自动补全插件,比如说大名鼎鼎的 OmniCppComplete .这一类的插 ...

  4. 【转】Vim自动补全插件----YouCompleteMe安装与配置

    原文网址:http://www.cnblogs.com/zhongcq/p/3630047.html 使用Vim编写程序少不了使用自动补全插件,在Linux下有没有类似VS中的Visual Assis ...

  5. Vim自动补全插件----YouCompleteMe安装与配置

    Vim自动补全插件----YouCompleteMe安装与配置 使用Vim编写程序少不了使用自动补全插件,在Linux下有没有类似VS中的Visual Assist X这么方便快捷的补全插件呢?以前用 ...

  6. vim python自动补全插件:pydiction

    vim python自动补全插件:pydiction 可以实现下面python代码的自动补全: 1.简单python关键词补全 2.python 函数补全带括号 3.python 模块补全 4.pyt ...

  7. CentOS7 Vim自动补全插件----YouCompleteMe安装与配置

    最近刚装了新系统CentOS7,想要把编码环境配置一下,使用Vim编写程序少不了使用自动补全插件,我以前用的是neocomplcache+code_complete+omnicppcomplete.但 ...

  8. vim中自动补全插件snipmate使用

    vim中自动补全插件snipmate使用 1.下载snipMatezip:https://github.com/msanders/snipmate.vim/archive/master.zip 2.解 ...

  9. vim自动补全插件YouCompleteMe

    前言 Valloric/YouCompleteMe可以说是vim安装最复杂的插件之一,但是一旦装好,却又是非常好用的.YouCompleteMe简称ycm 在安装折腾的过程中,我再一次的体会到,除了官 ...

随机推荐

  1. https和http共存的nginx简单配置

    server{ listen 80; listen 443 ssl; ssl_certificate /usr/local/nginx/ssl/www.demo.com/www.demo.com.cn ...

  2. Python爬虫入门教程 7-100 蜂鸟网图片爬取之二

    蜂鸟网图片--简介 今天玩点新鲜的,使用一个新库 aiohttp ,利用它提高咱爬虫的爬取速度. 安装模块常规套路 pip install aiohttp 运行之后等待,安装完毕,想要深造,那么官方文 ...

  3. Android--Task和BackStack高级

    前言 之前的博客讲到了Android下Activity的启动模式,涉及到了Task和BackStack的内容,对这些不熟悉的朋友,可以先去看看:Android--Activity的启动模式.这篇博客主 ...

  4. 【Java基础】【21IO(字符流)&字符流其他内容&递归】

    21.01_IO流(字符流FileReader) 1.字符流是什么 字符流是可以直接读写字符的IO流 字符流读取字符, 就要先读取到字节数据, 然后转为字符. 如果要写出字符, 需要把字符转为字节再写 ...

  5. Hbase给初学者的“下马威”

    自从成为架构师()之后,李大胖的学习动力似乎少了一些,尤其是今年(当然也有一些客观因素). 临近岁末,内心着实有些惭愧,决定学习一把大数据.跟随一下业界前沿(其实已经不是前沿了),梦想着有一天能够拥有 ...

  6. Shell从入门到精通进阶之三:表达式与运算符

    3.1 条件表达式 表达式 示例 [ expression ] [ 1 -eq 1 ]  ` expression ` ` 1 -eq 1 ` test expression test 1 -eq 1 ...

  7. 通过钩子程序跨程序关闭Window

    需求: 在实际场景中会有自身程序在调用第三方的动态库过程中,因为第三方的动态库弹框导致线程阻塞,必须手动将弹窗关闭后才能回到自身程序的主线程中. 最简单的场景就是很多自助设备,本身是没有固定操作员的, ...

  8. 流式大数据计算实践(4)----HBase安装

    一.前言 1.前面我们搭建好了高可用的Hadoop集群,本文正式开始搭建HBase 2.HBase简介 (1)Master节点负责管理数据,类似Hadoop里面的namenode,但是他只负责建表改表 ...

  9. webpack4.0各个击破(2)—— CSS篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  10. 事件绑定on与hover事件

    今天项目中UI设计了一个鼠标划入和划出的效果,本来这个小效果是非常简单的!可是在实际的生产环境中就出现了一点点问题!因为在实际的环境中,数据全部是用ajax异步加载进去的,这样就造成了hover方法不 ...