JFinal——Jquery-autoComplete插件完美结合之服务器数据处理
2012-08-27 14:05
323 查看
最近在使用神奇的Jfinal框架写项目的时候想用类似搜索框自动完成的效果,经过一番搜索后发现jquery的autocomplete比较不错,前台数据的处理基本都封装好了,可谓万事俱备只欠数据了。准备好所需的文件和写好后台的数据库查询之后发现一个很严重的问题,返回什么数据?返回什么类型的数据?数据的格式是什么样子?
看了官方demo的例子之后发现他的数据类型是
经过查看jquery.autocomplete.js,发现了一个function——parse(data),看到里面的
看了官方demo的例子之后发现他的数据类型是
var cities=["山东","山西","广州","广东"];的格式,心想也模拟出来个这样的数据试试,结果方法是调用了,但是神马都木有显示,心想肯定是数据的格式,没办法只好查看源码来找答案了。
经过查看jquery.autocomplete.js,发现了一个function——parse(data),看到里面的
var rows = data.split("\n"); row = row.split("|");两句话之后我笑了,很明显是拆分原始数据用的,反向推出这数据必然是 "aa" \n| "ab" \n|或者" aa\n| ab\n|或者aa|\nab|\n类似的格式,于是手动拼接了起来,
/** * 根据前台输入框中的值查询所有匹配的内容,返回到前台,由autocomplete插件自动完成下拉框效果 */ public void autoComplete() { StringBuffer sql = new StringBuffer( "SELECT u.nickname nickname FROM USER u WHERE u.status='1' "); // autoComplete默认传递值的name为"q",从控制台打印得出的结论 if (StringUtils.isNotEmpty(getPara("q"))) { // RegexUtils用来防止sql注入 sql.append(" and u.nickname like '%" + RegexUtils.StringFilter(getPara("q")) + "%'"); } // 根据昵称查询符合条件的数据 List<User> userList = User.udao.find(sql.toString()); if (!userList.isEmpty()) { int size = userList.size(); String str = ""; int n = 0; // 拼接数据 for (int i = 0; i < size; i++) { if (n > 0) { str += "| \n"; } str += userList.get(i).getStr("nickname"); n++; } // 以HTML方式返回数据 renderHtml(str); } }之后运行,完美运行。附上效果图。
相关文章推荐
- JQuery 插件 AutoComplete完美征程
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- jquery autocomplete插件结合ajax使用demo
- 使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配
- jquery autocomplete插件结合ajax使用demo
- jquery autocomplete插件结合ajax使用
- jquery.autocomplete插件完美应用实例
- JQuery和flot插件结合动态显示服务器CPU及内存状态
- .net 使用jQuery Autocomplete(自动完成)插件结合ajax
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- 使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- Jquery的DataTable插件AJAX服务器分页的的学习心得
- jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
- 使用jQuery.form插件,实现完美的表单异步提交
- jquery.autocomplete调用asp.net的WebService完美实现类似于淘宝自动完成的效果
- 分享一款超强的辅助标签(Tag)输入及其提供自动补齐功能(autocomplete)的jQuery插件 - jQuery TextExt
- jquery的插件 autocomplete demo
- jquery插件autocomplete
- 使用jquery插件uploadify结合commons fileupload实现多文件上传