最近在使用神奇的Jfinal框架写项目的时候想用类似搜索框自动完成的效果,经过一番搜索后发现jquery的autocomplete比较不错,前台数据的处理基本都封装好了,可谓万事俱备只欠数据了。准备好所需的文件和写好后台的数据库查询之后发现一个很严重的问题,返回什么数据?返回什么类型的数据?数据的格式是什么样子?
看了官方demo的例子之后发现他的数据类型是
var cities=["山东","山西","广州","广东"];
的格式,心想也模拟出来个这样的数据试试,结果方法是调用了,但是神马都木有显示,心想肯定是数据的格式,没办法只好查看源码来找答案了。
经过查看jquery.autocomplete.js,发现了一个function——parse(data),看到里面的
1var rows = data.split("\n"); 2row = row.split("|");
两句话之后我笑了,很明显是拆分原始数据用的,反向推出这数据必然是 "aa" \n| "ab" \n|或者" aa\n| ab\n|或者aa|\nab|\n类似的格式,于是手动拼接了起来,
1/** 2 * 根据前台输入框中的值查询所有匹配的内容,返回到前台,由autocomplete插件自动完成下拉框效果 3 */ 4 public void autoComplete() { 5 StringBuffer sql = new StringBuffer( 6 "SELECT u.nickname nickname FROM USER u WHERE u.status='1' "); 7 // autoComplete默认传递值的name为"q",从控制台打印得出的结论 8 if (StringUtils.isNotEmpty(getPara("q"))) { 9 // RegexUtils用来防止sql注入 10 sql.append(" and u.nickname like '%" 11 + RegexUtils.StringFilter(getPara("q")) + "%'"); 12 } 13 // 根据昵称查询符合条件的数据 14 List<User> userList = User.udao.find(sql.toString()); 15 if (!userList.isEmpty()) { 16 int size = userList.size(); 17 String str = ""; 18 int n = 0; 19 // 拼接数据 20 for (int i = 0; i < size; i++) { 21 if (n > 0) { 22 str += "| \n"; 23 } 24 str += userList.get(i).getStr("nickname"); 25 n++; 26 } 27 // 以HTML方式返回数据 28 renderHtml(str); 29 } 30 }
之后运行,完美运行。附上效果图。
