溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在網上會有很多關于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
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
