bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

Struts2結(jié)合jqueryautocomplet插件實現(xiàn)自動提示詳解

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

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

一、我的資源中有autcomplet的json實例和autocomplet的源代碼，也是copy網(wǎng)上的，大家可以免費下載，下載地址：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>

      顯示效果如下：

    Struts2結(jié)合jquery autocomplet插件實現(xiàn)自動提示詳解

注意：

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腳本函數(shù)：    
<script type="text/javascript">  		  $(function(){  		     $("#content").autocomplete("searchAction!search.do", {//用戶請求的Action  				max: 12,//autoComplete下拉顯示項目的個數(shù).默認(rèn)為10  				autoFill: false, //要不要在用戶選擇時自動將用戶當(dāng)前鼠標(biāo)所在的值填入到文本框，默認(rèn)為false  				mustMatch: false,//如果設(shè)置為true,autoComplete只會允許匹配的結(jié)果出現(xiàn)在輸入框,所有當(dāng)用戶輸入的是非法字符時將會得不到下拉框，默認(rèn)為false            //決定比較時是否要在字符串內(nèi)部查看匹配,如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用                                  matchContains: true,  				scrollHeight: 500,//自動完成提示的卷軸高度用像素大小表示，默認(rèn)為180  				extraParams:{//添加額外的參數(shù)，如果你只有文本框中輸入的參數(shù)，你可以不用這個，但是Action中接收字符必須與文本框的name屬性一致  		    	   keyQuery:function(){//在Action中定義了keyQuery字符串  		    	      return $("#content").val();  		    	   },  		    	   fast:2//在Action中定義了fast，用于接收  				},           //對匹配的每一行數(shù)據(jù)使用此函數(shù)格式化，返回值是顯示給用戶的數(shù)據(jù)內(nèi)容。參數(shù)data表示服務(wù)器返回來的結(jié)果的數(shù)組，i表示當(dāng)前行數(shù)，           total表示搜索到的對應(yīng)個數(shù)(總記錄數(shù))，如果不指定直接返回服務(wù)器的結(jié)果值                             formatItem: function(data, i, total) {  					return data[0];  				}  			}).result(function(event,item,formatted){  					location.href="http://localhost/searchuser.action?userusername="+item[0];  			});        //result 此事件會在用戶選中某一項后觸發(fā)，參數(shù)為 event,data,formatted。event為事件對象,data為選中的數(shù)據(jù)行，formatted是formatResult函數(shù)的返回值        //formatMatch  對每一行數(shù)據(jù)使用此函數(shù)格式化需要查詢的數(shù)據(jù)格式，返回值是給內(nèi)部搜索算法使用的。實例中用戶看到的匹配結(jié)果是formatItem中設(shè)置的格式,              參數(shù)與formatItem相同        //formatResult 此函數(shù)是用戶選中后返回的數(shù)據(jù)格式，比如只返回row.name或row.id等，參數(shù)與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;//條件參數(shù)  	private String jsonResult;//用于接收json數(shù)據(jù)，傳到前臺頁面可以直接用result中的item接收  	//數(shù)據(jù)格式為["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模擬數(shù)據(jù)，當(dāng)然在實際項目中我們則是從數(shù)據(jù)庫中取數(shù)據(jù)然后轉(zhuǎn)換  		List<String> list=new ArrayList<String>();  		list.add("abc");  		list.add("sdeasd");  		list.add("中國");  		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);//傳到前臺頁面，ajax請求  		return null;  	}  	  	//定義轉(zhuǎn)換函數(shù)  	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、部署到服務(wù)器進(jìn)行測試，當(dāng)我們在文本框中輸入a時，則提示信息會出現(xiàn)abc、sdeasd、而qa，并且我們不用去考慮樣式和編寫div層，還有鼠標(biāo)經(jīng)過以及鼠標(biāo)點擊事件
的處理，因為autocomplet插件已經(jīng)幫我們處理好了。

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

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

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

                分享標(biāo)題：Struts2結(jié)合jqueryautocomplet插件實現(xiàn)自動提示詳解
                

                鏈接分享：http://vcdvsql.cn/article30/gjijso.html
            

            

                成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)建站、品牌網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、動態(tài)網(wǎng)站            

            

                廣告
                
            

            

                聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：
                創(chuàng)新互聯(lián)
            

        

        
    


    

        手機(jī)網(wǎng)站建設(shè)