Struts2结合jquery autocomplet插件实现自动提示详解
在网上会有很多关于struts2结合autocomplet插件的实例,但是不怎么完整,让人感觉不清楚,刚刚在公司做了一个关于这个的项目,页面也用到了这个插件,所以把详细的步骤和注意事项贴出来和大家分享,废话不多说,贴铁代码:本文代码下载地址:http://download.csdn.net/detail/harderxin/4504612
一、我的资源中有autcomplet的json实例和autocomplet的源代码,也是copy网上的,大家可以免费下载,下载地址:http://download.csdn.net/detail/harderxin/4504288
二、开始我们的案例旅程
1、编写页面index.jsp
<body> 自动提示: <!-- autocomplete防止一些浏览器的自动提示完成功能 --> <input type="text" name="content" id="content" autocomplete="off" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"/> <input type="button" id="button" name="button" value="提交" /> <br /> <p> </p> </body>
显示效果如下:
注意:
autocomplete="off"是为了防止有些浏览器自动文本框输入提示,onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,''),是不允许输入不合法 的字符,例如。,?【】{}等等 2、将我们的jquery和autocomplet插件引入到页面中 <script type="text/javascript" language="javascript"src="<%=basePath%>test/js/jquery-1.4.4.js"></script> <script type="text/javascript" language="javascript" src="<%=basePath%>test/js/jquery.autocomplete.js"></script> 3、在index.jsp中编写js脚本函数:<script type="text/javascript"> $(function(){ $("#content").autocomplete("searchAction!search.do", {//用户请求的Action max: 12,//autoComplete下拉显示项目的个数.默认为10 autoFill: false, //要不要在用户选择时自动将用户当前鼠标所在的值填入到文本框,默认为false mustMatch: false,//如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框,默认为false //决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用 matchContains: true, scrollHeight: 500,//自动完成提示的卷轴高度用像素大小表示,默认为180 extraParams:{//添加额外的参数,如果你只有文本框中输入的参数,你可以不用这个,但是Action中接收字符必须与文本框的name属性一致 keyQuery:function(){//在Action中定义了keyQuery字符串 return $("#content").val(); }, fast:2//在Action中定义了fast,用于接收 }, //对匹配的每一行数据使用此函数格式化,返回值是显示给用户的数据内容。参数data表示服务器返回来的结果的数组,i表示当前行数, total表示搜索到的对应个数(总记录数),如果不指定直接返回服务器的结果值 formatItem: function(data, i, total) { return data[0]; } }).result(function(event,item,formatted){ location.href="http://localhost/searchuser.action?userusername="+item[0]; }); //result 此事件会在用户选中某一项后触发,参数为 event,data,formatted。event为事件对象,data为选中的数据行,formatted是formatResult函数的返回值 //formatMatch 对每一行数据使用此函数格式化需要查询的数据格式,返回值是给内部搜索算法使用的。实例中用户看到的匹配结果是formatItem中设置的格式, 参数与formatItem相同 //formatResult 此函数是用户选中后返回的数据格式,比如只返回row.name或row.id等,参数与formatItem相同 }); </script>
4、编写我们的Action类package com.foodproject.test.action; import java.util.ArrayList; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import org.json.JSONException; public class SearchAction { private String keyQuery;//前台传过来的文本框中的值 private String fast;//条件参数 private String jsonResult;//用于接收json数据,传到前台页面可以直接用result中的item接收 //数据格式为["abc","sawe","wewe","中国","人们"] public String getKeyQuery() { return keyQuery; } public void setKeyQuery(String keyQuery) { this.keyQuery = keyQuery; } public String getFast() { return fast; } public void setFast(String fast) { this.fast = fast; } public String getJsonResult() { return jsonResult; } public void setJsonResult(String jsonResult) { this.jsonResult = jsonResult; } public String search()throws Exception{ //这里用list模拟数据,当然在实际项目中我们则是从数据库中取数据然后转换 List<String> list=new ArrayList<String>(); list.add("abc"); list.add("sdeasd"); list.add("中国"); list.add("人们"); list.add("而qa"); this.jsonResult=parseResNameResult(list);//将数据转换为相应的json格式数据 HttpServletResponse response=ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); response.setContentType("text/plain"); response.getWriter().print(jsonResult);//传到前台页面,ajax请求 return null; } //定义转换函数 private String parseResNameResult(List list)throws JSONException{ Map map=null; StringBuffer buffer=new StringBuffer("["); for(int i=0;i<list.size();i++){ buffer.append("\""+list.get(i)+"\","); } if(buffer.length()>2){ buffer.deleteCharAt(buffer.length()-1); } buffer.append("]"); return buffer.toString(); } }
5、部署到服务器进行测试,当我们在文本框中输入a时,则提示信息会出现abc、sdeasd、而qa,并且我们不用去考虑样式和编写div层,还有鼠标经过以及鼠标点击事件
的处理,因为autocomplet插件已经帮我们处理好了。
6、中文问题处理(copy)
jQuery.Autocomplete是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。
但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配;而在我的IE6.0下,则无此问题。
原因分析:
Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析 jquery.autocomplete.js第92行),在IE6中,当输入法打开时,输入的字符是不会触发”keydown”的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的;但在firefox3.0下,无论输入法打开否,按键都会触发”keydown”事件,所以造成中文输入完毕,自动匹配的是刚才打出的部分中文拼音字母。
解决方法:
网上查到的最多做法是修改jquery.autocomplete.js第92行,将”keydown”替换为”keyup”,但这个不是根本办法,虽然这样改后可在firefox中及时对输入的中文进行自动匹配,但将原插件中回车、tab等重要的事件机制破坏了,比如这样改后,如果你的input是在一个form里的话,回车从原来的将选定项输入到input中变为了直接提交form表单了,这并不是我们想要的。
我的方法原理是,补充一个原插件触发查询的事件,就是当input输入栏发生字符变化时,重新进行查询(调用其内部的onChange函数),这里主要针对firefox而言,因为我们的系统访问最多的是IE和firefox。而恰好firefox有一个input变化的事件就是oninput,那么我们只要在原jquery.autocomplete.js第199行,插入如下代码:
.bind("input", function()
{
onChange(0, true);
});
添加代码后的autocomplet源文件代码为:.bind("unautocomplete", function() { select.unbind(); jQueryinput.unbind(); jQuery(input.form).unbind(".autocomplete"); }).bind("input",function(){ onChange(0,true); });
7、大家看一下autocomplet的源代码,然后自己在做一下测试,里面还有很多的函数值得我们去研究,提示信息基本上实现了,欢迎大家共同探讨交流。全文实例代码下载:http://download.csdn.net/detail/harderxin/4504612