Struts2结合jquery autocomplet插件实现自动提示详解

Dear 丶 2022-01-16 12:59 294阅读 0赞

在网上会有很多关于struts2结合autocomplet插件的实例，但是不怎么完整，让人感觉不清楚，刚刚在公司做了一个关于这个的项目，页面也用到了这个插件，所以把详细的步骤和注意事项贴出来和大家分享，废话不多说，贴铁代码：本文代码下载地址：[http://download.csdn.net/detail/harderxin/4504612  
][http_download.csdn.net_detail_harderxin_4504612]

一、我的资源中有autcomplet的json实例和autocomplet的源代码，也是copy网上的，大家可以免费下载，下载地址：[http://download.csdn.net/detail/harderxin/4504288][http_download.csdn.net_detail_harderxin_4504288]

二、开始我们的案例旅程

1、编写页面index.jsp

显示效果如下：

![1345102265_8399.png][]

注意：

autocomplete="off"是为了防止有些浏览器自动文本框输入提示，οnkeyup="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脚本函数：

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

转载于:https://blog.51cto.com/8786457/1389953

[http_download.csdn.net_detail_harderxin_4504612]: http://download.csdn.net/detail/harderxin/4504612
[http_download.csdn.net_detail_harderxin_4504288]: http://download.csdn.net/detail/harderxin/4504288
[1345102265_8399.png]: https://img-my.csdn.net/uploads/201208/16/1345102265_8399.png