随笔-124  评论-49  文章-56  trackbacks-0
1 web.xml
<!------ 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>

2 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>

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 阅读(341) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: