在網(wǎng)上會(huì)有很多關(guān)于struts2結(jié)合autocomplet插件的實(shí)例，但是不怎么完整，讓人感覺(jué)不清楚，剛剛在公司做了一個(gè)關(guān)于這個(gè)的項(xiàng)目，頁(yè)面也用到了這個(gè)插件，所以把詳細(xì)的步驟和注意事項(xiàng)貼出來(lái)和大家分享，廢話不多說(shuō)，貼鐵代碼：本文代碼下載地址：http://download.csdn.net/detail/harderxin/4504612

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗(yàn)，各類網(wǎng)站都可以開(kāi)發(fā)，品牌網(wǎng)站制作，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計(jì)，建網(wǎng)站費(fèi)用，建網(wǎng)站多少錢(qián)，價(jià)格優(yōu)惠，收費(fèi)合理。

一、我的資源中有autcomplet的json實(shí)例和autocomplet的源代碼，也是copy網(wǎng)上的，大家可以免費(fèi)下載，下載地址：http://download.csdn.net/detail/harderxin/4504288

二、開(kāi)始我們的案例旅程

  1、編寫(xiě)頁(yè)面index.jsp

	  		自動(dòng)提示：  		  		  		  		
  		
  		
    	

注意：

autocomplete="off"是為了防止有些瀏覽器自動(dòng)文本框輸入提示，onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,''),是不允許輸入不合法  的字符，例如。，？【】｛｝等等    2、將我們的jquery和autocomplet插件引入到頁(yè)面中        3、在index.jsp中編寫(xiě)js腳本函數(shù)：    

4、編寫(xiě)我們的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;//前臺(tái)傳過(guò)來(lái)的文本框中的值  	private String fast;//條件參數(shù)  	private String jsonResult;//用于接收json數(shù)據(jù)，傳到前臺(tái)頁(yè)面可以直接用result中的item接收  	//數(shù)據(jù)格式為["abc","sawe","wewe","中國(guó)","人們"]  	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模擬數(shù)據(jù)，當(dāng)然在實(shí)際項(xiàng)目中我們則是從數(shù)據(jù)庫(kù)中取數(shù)據(jù)然后轉(zhuǎn)換  		List list=new ArrayList();  		list.add("abc");  		list.add("sdeasd");  		list.add("中國(guó)");  		list.add("人們");  		list.add("而qa");  		this.jsonResult=parseResNameResult(list);//將數(shù)據(jù)轉(zhuǎn)換為相應(yīng)的json格式數(shù)據(jù)  		HttpServletResponse response=ServletActionContext.getResponse();  		response.setCharacterEncoding("UTF-8");  		response.setContentType("text/plain");  		response.getWriter().print(jsonResult);//傳到前臺(tái)頁(yè)面，ajax請(qǐng)求  		return null;  	}  	  	//定義轉(zhuǎn)換函數(shù)  	private String parseResNameResult(List list)throws JSONException{  		Map map=null;  		StringBuffer buffer=new StringBuffer("[");  		for(int i=0;i2){  			buffer.deleteCharAt(buffer.length()-1);  		}  		buffer.append("]");  		return buffer.toString();  	}    }  

5、部署到服務(wù)器進(jìn)行測(cè)試，當(dāng)我們?cè)谖谋究蛑休斎隺時(shí)，則提示信息會(huì)出現(xiàn)abc、sdeasd、而qa，并且我們不用去考慮樣式和編寫(xiě)div層，還有鼠標(biāo)經(jīng)過(guò)以及鼠標(biāo)點(diǎn)擊事件
的處理，因?yàn)閍utocomplet插件已經(jīng)幫我們處理好了。

6、中文問(wèn)題處理（copy）
jQuery.Autocomplete是jquery的流行插件，能夠很好的實(shí)現(xiàn)輸入框的自動(dòng)完成(autocomplete)、建議提示(input suggest)功能，支持ajax數(shù)據(jù)加載。
但唯一遺憾的是，在對(duì)中文輸入法打開(kāi)時(shí)，firefox3.0中是對(duì)中文拼音的自動(dòng)匹配，而對(duì)輸入后的中文無(wú)法及時(shí)觸發(fā)匹配；而在我的IE6.0下，則無(wú)此問(wèn)題。 

原因分析： 
Autocomplete插件對(duì)用戶輸入字符的觸發(fā)自動(dòng)匹配是通過(guò)”keydown”事件進(jìn)行的（可分析 jquery.autocomplete.js第92行），在IE6中，當(dāng)輸入法打開(kāi)時(shí)，輸入的字符是不會(huì)觸發(fā)”keydown”的，只有中文輸入完畢才觸發(fā)之，所以中文輸入和latin文沒(méi)有區(qū)別的；但在firefox3.0下，無(wú)論輸入法打開(kāi)否，按鍵都會(huì)觸發(fā)”keydown”事件，所以造成中文輸入完畢，自動(dòng)匹配的是剛才打出的部分中文拼音字母。

解決方法： 
網(wǎng)上查到的最多做法是修改jquery.autocomplete.js第92行，將”keydown”替換為”keyup”，但這個(gè)不是根本辦法，雖然這樣改后可在firefox中及時(shí)對(duì)輸入的中文進(jìn)行自動(dòng)匹配，但將原插件中回車(chē)、tab等重要的事件機(jī)制破壞了，比如這樣改后，如果你的input是在一個(gè)form里的話，回車(chē)從原來(lái)的將選定項(xiàng)輸入到input中變?yōu)榱酥苯犹峤籪orm表單了，這并不是我們想要的。
我的方法原理是，補(bǔ)充一個(gè)原插件觸發(fā)查詢的事件，就是當(dāng)input輸入欄發(fā)生字符變化時(shí)，重新進(jìn)行查詢（調(diào)用其內(nèi)部的onChange函數(shù)），這里主要針對(duì)firefox而言，因?yàn)槲覀兊南到y(tǒng)訪問(wèn)最多的是IE和firefox。而恰好firefox有一個(gè)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的源代碼，然后自己在做一下測(cè)試，里面還有很多的函數(shù)值得我們?nèi)パ芯浚崾拘畔⒒旧蠈?shí)現(xiàn)了，歡迎大家共同探討交流。  
  
全文實(shí)例代碼下載：http://download.csdn.net/detail/harderxin/4504612              
 
  
  
  
  
            
            
                        

            當(dāng)前名稱：Struts2結(jié)合jqueryautocomplet插件實(shí)現(xiàn)自動(dòng)提示詳解            

            當(dāng)前網(wǎng)址：http://weahome.cn/article/gjijso.html