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>
劈天造陆,开辟属于自己的天地!!!与君共勉