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. MVC从路由到Controller运行机制

    下图中每个箭头的左侧对应的右侧方法为对象调用方法的过程: 由于UrlRoutingModule这个HttpModule被注册到Web应用中,所有对每个抵达的请求来说,当代表当前应用的HttpAppli ...

  2. C#版 - Leetcode 215. Kth Largest Element in an Array-题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  3. CentOS7 systemctl tomcat常用配置

    开始配置tomcat 1.环境准备,安装java 在生产环境上,我一般使用oracle java,不使用openjdk,所以先卸载系统自带的openjdk yum remove java 下载orac ...

  4. 【Python3爬虫】selenium入门

    selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Fire ...

  5. JsChart组件使用

    JsChart是什么? JSChart能够在网页上生成图标,常用于统计信息,十分好用的一个JS组件. 使用JsChart 一.导入jscharts.js 二.编写jscharts.jsp测试页面 下载 ...

  6. 第一个Mybatis程序示例 Mybatis简介(一)

    在JDBC小结中(可以参阅本人JDBC系列文章),介绍到了ORM,其中Mybatis就是一个不错的ORM框架 MyBatis由iBatis演化而来 iBATIS一词来源于“internet”和“aba ...

  7. C#实现以太仿DApp合约编译、部署

    在网上找了一些关于C#开发以太仿的资料,大概了解了以太仿常用名词,后续可能需要根据资料查看开源的源码进一步熟悉一下. 一.准备合约 这里准备了一个EzToken.sol合约,目前还不会solidity ...

  8. Scala(二) —— 函数

    try 表达式 var result = try{ Integer.parseInt("dog") }catch{ case _ => 0 }finally{ println ...

  9. 第41章 CORS - Identity Server 4 中文文档(v1.0.0)

    第41章 CORS IdentityServer中的许多端点将通过基于JavaScript的客户端的Ajax调用进行访问.鉴于IdentityServer最有可能托管在与这些客户端不同的源上,这意味着 ...

  10. 第一次AOP,附上使用DEMO,可用在简单生产环境了

    demo代码如下 public class ConsoleTimeAttribute : ApectBaseAttribute { public override void Before(ApectC ...