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>