最近学习了jquery ui的autocomplete 自动补全,和大家分享一下学习的经验,希望对初学者有用。
第一次写博客,
使用语言 java js
使用语言主要是java,这个参考了网上的一些教程,你可以参考这里
jQuery UI 实例 – 自动完成(Autocomplete) | 菜鸟教程 http://www.runoob.com/jqueryui/example-autocomplete.html
先来看一个静态页面的自动补全,数据全部是写死的,没有与后台做交互的。
运行效果如图
鼠标选中效果如图:
代码如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
学习这个之前。你首先要了解Ajax技术,至于这个是什么,就请自行百度吧。
动态补全我们需要两部分,前台页面部分 和后台服务器处理程序。
在前台页面上输入内容后,输入框的值实时的发送到后台,后台进行相应的处理,返回匹配的数据集合到前台显示。
在前面的静态页面中,我们是把需要填充的数据写进了 availableTags 数组里,那么如果我们想做与服务器有交互的自动补全,最简单的思路应该是这样,
获取前台页面输入框的值》发送到后台》后台做相应的处理(例如查询数据库)》返回匹配的数据集合到前台页面》数据集合填充到availableTags数组里,只要你能获得到匹配的数据集合,那其他的操作基本就和静态页面的操作一样了。
我使用的是spring mvc开发。
先看一下后台服务器代码
这段代码就是获取前台传入的值。查询数据库,返回含有匹配结果的json字符串到前台,每个人的项目不一样,这段代码参考意义不大。
@RequestMapping(value = "/fillText2")
public @ResponseBody String fillText2(HttpServletRequest request) throws IOException {
String ReturnStr = "";//最后程序处理后返回的字符串
String sql="";
String patientName = request.getParameter("patientName");//获取到通过ajax传过来的前台页面输入框的值
System.out.println("获取到值为:patientName"+patientName);
if(patientName==null){//如果值为null,即输入框没有值,将值设为"",
patientName="";
}
//获取到输入框的值,拼接sql语句,查询数据库,返回相应的数据集合
sql=sql+" and t1.PATIENT_NAME like '%%"+patientName+"%%'";
PatientDwcx px=new PatientDwcx();
Page page = new Page();
page= patientDwcxService.page(px,sql);
List list=page.getDs();//查询数据库,获取到一个对象的集合
System.out.println("查找到"+list.size()+"条记录");
//使用LinkedHashSet接收,去除重复元素
LinkedHashSet set = new LinkedHashSet();
for (int i=0;i<list.size();i++){
set.add(list.get(i).getPatientName().trim());//抽取出对象集合中的PatientName属性,因为填充的是这个字段
}
System.out.println(set.size());//控制台输出,便于调试
System.out.println(set.toString());//控制台输出,便于调试
ReturnStr = JacksonUtil.bean2Json(set);//将储存有匹配出来信息的集合转换为json字符串
System.out.println("获取到的数据"+ReturnStr);
return ReturnStr;//返回ReturnStr 字符串,发送到后台
}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
自动填充2