1 web.xml
2 dwr.xml
3 User.java
/** *//************** 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);
}
}
4 AutoSuggest.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;
}
}
5 CharacterEncodingFilter.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;
}
}
6 autosuggest.css
/**//************** 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;
}
7 autosuggest.js
/**//************** 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);
};
8 index.html
<!------------- index.html -------------->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Autosuggest Example</title>
<script src='dwr/interface/AutoSuggest.js'></script>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
<script type="text/javascript" src="autosuggest.js"></script>
<link rel="stylesheet" type="text/css" href="autosuggest.css" />
</head>
<body>
<br/>
Name:<input type="text" id="name" onfocus="new AutoSuggestControl(this)" />
Tel:<input type="text" id="tel" /></p>
</body>
</html>
posted on 2009-11-03 11:07
junly 閱讀(343)
評論(0) 編輯 收藏