溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
在網(wǎng)上會有很多關(guān)于struts2結(jié)合autocomplet插件的實例，但是不怎么完整，讓人感覺不清楚，剛剛在公司做了一個關(guān)于這個的項目，頁面也用到了這個插件，所以把詳細(xì)的步驟和注意事項貼出來和大家分享，廢話不多說，貼鐵代碼：本文代碼下載地址：http://download.csdn.net/detail/harderxin/4504612
一、我的資源中有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>
注意：
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表單了，這并不是我們想要的。
我的方法原理是，補充一個原插件觸發(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
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
