<!------ AutoSuggest/WebContent/WEB-INF/web.xml ----> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app id="dwr"> <display-name>Auto Suggest Demo</display-name> <description>Test for Auto Suggest</description> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>test.joeyta.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF8</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <description>Direct Web Remoter Servlet</description> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> </web-app> <!------ AutoSuggest/WebContent/WEB-INF/web.xml ----> 建立 dwr.xml <!------ AutoSuggest/WebContent/WEB-INF/dwr.xml ----> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.ltd.uk/dwr/dwr20.dtd"> <dwr> <allow> <create creator="new" javascript="AutoSuggest"> <param name="class" value="test.joeyta.AutoSuggest"/> </create> <convert match="test.joeyta.User" converter="bean"></convert> </allow> </dwr> <!------ AutoSuggest/WebContent/WEB-INF/dwr.xml ----> /************** User.java ************************/ package test.joeyta; public class User implements Comparable { private String name; private String tel; public User(){} public User(String name, String tel){ this.name = name; this.tel = tel; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getTel() { return tel; } public void setTel(String tel) { this.tel = tel; } public int compareTo(Object object) { return this.name.compareTo(((User)object).name); } } /************** User.java ************************/ /************** AutoSuggest.java ************************/ package test.joeyta; import java.util.ArrayList; import java.util.Collections; import java.util.Iterator; import java.util.List; public class AutoSuggest { public List users; public AutoSuggest(){ users = new ArrayList(); users.add(new User("Joeyta","123456")); users.add(new User("陳大強","無電話")); users.add(new User("李小強","太多電話")); users.add(new User("Peter","23456")); users.add(new User("Mary","34567")); users.add(new User("Andy","45678")); users.add(new User("Andrew","78900")); users.add(new User("Anthory","89000")); users.add(new User("jane","654321")); } public List getSuggestions(String sSuggestValue) { System.out.println(sSuggestValue); List returnList = new ArrayList(); if (sSuggestValue != null && !sSuggestValue.equals("")) { for (Iterator iter = users.iterator(); iter.hasNext();) { User user = (User) iter.next(); if(user.getName().toLowerCase().indexOf(sSuggestValue.toLowerCase()) >= 0){ returnList.add(user); } } Collections.sort(returnList); } return returnList; } } /************** AutoSuggest.java ************************/ /************** CharacterEncodingFilter.java ************/ package test.joeyta; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; public class CharacterEncodingFilter implements Filter { protected String encoding = null; protected FilterConfig filterConfig = null; protected boolean ignore = true; public void destroy() { this.encoding = null; this.filterConfig = null; } public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { if (ignore (request.getCharacterEncoding() == null)) { String encoding = selectEncoding(request); if (encoding != null) request.setCharacterEncoding(encoding); } chain.doFilter(request, response); } public void init(FilterConfig filterConfig) throws ServletException { this.filterConfig = filterConfig; this.encoding = filterConfig.getInitParameter("encoding"); String value = filterConfig.getInitParameter("ignore"); if (value == null) this.ignore = true; else if (value.equalsIgnoreCase("true")) this.ignore = true; else if (value.equalsIgnoreCase("yes")) this.ignore = true; else this.ignore = false; } protected String selectEncoding(ServletRequest request) { return this.encoding; } } /************** CharacterEncodingFilter.java ************/ /************** autosuggest.css ************/ div.suggestions { background-color: #ffffff; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; position: absolute; } div.suggestions div { cursor: default; padding: 0px 3px; } div.suggestions div.current { background-color: #3366cc; color: white; } /************** autosuggest.css ************/ /************** autosuggest.js ************/ function AutoSuggestControl(oTextbox /*:HTMLInputElement*/) { this.cur /*:int*/ = -1; this.layer = null; this.textbox /*:HTMLInputElement*/ = oTextbox; this.init(); this.requestSuggestions = function (oAutoSuggestControl /*:AutoSuggestControl*/) { var sSuggestValue = oAutoSuggestControl.textbox.value; AutoSuggest.getSuggestions(sSuggestValue, function(list) { oAutoSuggestControl.autosuggest(list); }); }; } AutoSuggestControl.prototype.autosuggest = function (aSuggestions /*:Array*/) { //make sure there's at least one suggestion if (aSuggestions.length > 0) { this.showSuggestions(aSuggestions); } else { this.hideSuggestions(); } }; /** * Creates the dropdown layer to display multiple suggestions. * @scope private */ AutoSuggestControl.prototype.createDropDown = function () { var oThis = this; //create the layer and assign styles this.layer = document.createElement("div"); this.layer.className = "suggestions"; this.layer.style.visibility = "hidden"; this.layer.style.width = this.textbox.offsetWidth; //when the user clicks on the a suggestion, get the text (innerHTML) //and place it into a textbox this.layer.onmousedown = this.layer.onmouseup = this.layer.onmouseover = function (oEvent) { oEvent = oEvent | window.event; oTarget = oEvent.target | oEvent.srcElement; if (oEvent.type == "mousedown") { oThis.textbox.value = oTarget.firstChild.nodeValue; oThis.hideSuggestions(); } else if (oEvent.type == "mouseover") { oThis.highlightSuggestion(oTarget); } else { oThis.textbox.focus(); } }; document.body.appendChild(this.layer); }; AutoSuggestControl.prototype.getLeft = function () /*:int*/ { var oNode = this.textbox; var iLeft = 0; while(oNode.tagName != "BODY") { iLeft += oNode.offsetLeft; oNode = oNode.offsetParent; } return iLeft; }; AutoSuggestControl.prototype.getTop = function () /*:int*/ { var oNode = this.textbox; var iTop = 0; while(oNode.tagName != "BODY") { iTop += oNode.offsetTop; oNode = oNode.offsetParent; } return iTop; }; AutoSuggestControl.prototype.handleKeyDown = function (oEvent /*:Event*/) { switch(oEvent.keyCode) { case 38: //up arrow this.previousSuggestion(); break; case 40: //down arrow this.nextSuggestion(); break; case 13: //enter this.hideSuggestions(); break; } }; AutoSuggestControl.prototype.handleKeyUp = function (oEvent /*:Event*/) { var iKeyCode = oEvent.keyCode; //make sure not to interfere with non-character keys if ((iKeyCode != 8 && iKeyCode < 32) (iKeyCode >= 33 && iKeyCode < 46) (iKeyCode >= 112 && iKeyCode <= 123)) { //ignore } else { //request suggestions from the suggestion provider with typeahead this.requestSuggestions(this); } }; AutoSuggestControl.prototype.hideSuggestions = function () { this.layer.style.visibility = "hidden"; }; AutoSuggestControl.prototype.highlightSuggestion = function (oSuggestionNode) { for (var i=0; i < this.layer.childNodes.length; i++) { var oNode = this.layer.childNodes[i]; if (oNode == oSuggestionNode) { oNode.className = "current" } else if (oNode.className == "current") { oNode.className = ""; } } }; AutoSuggestControl.prototype.init = function () { //save a reference to this object var oThis = this; //assign the onkeyup event handler this.textbox.onkeyup = function (oEvent) { //check for the proper location of the event object if (!oEvent) { oEvent = window.event; } //call the handleKeyUp() method with the event object oThis.handleKeyUp(oEvent); }; //assign onkeydown event handler this.textbox.onkeydown = function (oEvent) { //check for the proper location of the event object if (!oEvent) { oEvent = window.event; } //call the handleKeyDown() method with the event object oThis.handleKeyDown(oEvent); }; //assign onblur event handler (hides suggestions) this.textbox.onblur = function () { oThis.hideSuggestions(); }; //create the suggestions dropdown this.createDropDown(); }; AutoSuggestControl.prototype.nextSuggestion = function () { var cSuggestionNodes = this.layer.childNodes; if (cSuggestionNodes.length > 0 && this.cur <= cSuggestionNodes.length-1) { if(this.cur != cSuggestionNodes.length-1){ ++this.cur; } var oNode = cSuggestionNodes[this.cur]; this.highlightSuggestion(oNode); this.textbox.value = oNode.firstChild.nodeValue; dwr.util.setValue("tel", oNode.getAttribute("tel")); } }; AutoSuggestControl.prototype.previousSuggestion = function () { var cSuggestionNodes = this.layer.childNodes; if (cSuggestionNodes.length > 0 && this.cur >= 0) { if(this.cur != 0){ --this.cur; } var oNode = cSuggestionNodes[this.cur]; this.highlightSuggestion(oNode); this.textbox.value = oNode.firstChild.nodeValue; dwr.util.setValue("tel", oNode.getAttribute("tel")); } }; AutoSuggestControl.prototype.showSuggestions = function (aSuggestions /*:Array*/) { var oDiv = null; this.layer.innerHTML = ""; //clear contents of the layer var user; for (var i=0; i < aSuggestions.length; i++) { user = aSuggestions[i]; oDiv = document.createElement("div"); oDiv.appendChild(document.createTextNode(user.name)); oDiv.setAttribute("tel",user.tel); this.layer.appendChild(oDiv); } this.layer.style.left = this.getLeft() + "px"; this.layer.style.top = (this.getTop()+this.textbox.offsetHeight) + "px"; this.layer.style.visibility = "visible"; var oIFrame = document.createElement("iframe"); oIFrame.src = "javascript:false"; oIFrame.style.position = "absolute"; oIFrame.style.visibility = "inherit"; oIFrame.style.top = "0px"; oIFrame.style.left = "0px"; oIFrame.style.width = this.textbox.offsetWidth + "px"; oIFrame.style.height = this.layer.offsetHeight + "px"; oIFrame.style.zIndex = "-1"; oIFrame.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"; this.layer.appendChild(oIFrame); }; /************** autosuggest.js ************/ <!------------- index.html --------------> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Autosuggest Example</title> <mce:script src="dwr/interface/AutoSuggest.js" mce_src="dwr/interface/AutoSuggest.js"></mce:script> <mce:script src="dwr/engine.js" mce_src="dwr/engine.js"></mce:script> <mce:script src="dwr/util.js" mce_src="dwr/util.js"></mce:script> <mce:script type="text/javascript" src="autosuggest.js" mce_src="autosuggest.js"></mce:script> <link rel="stylesheet" type="text/css" href="autosuggest.css" mce_href="autosuggest.css" /> </head> <body> <br/> Name:<input type="text" id="name" οnfοcus="new AutoSuggestControl(this)" /> Tel:<input type="text" id="tel" /></p> </body> </html> <!------------- index.html -------------->