用ajax + webwork 实现google suggest 效果

代码如下:
autoComplete.html

< html >
   < head >
       < title > Ajax Auto Complete </ title >
       < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
       < style  type ="text/class" > ...
      .mouseOut{...}{
          background: #708090;
          color:#FFFAFA;
          }
       .mouseOver{...}{
          background:#FFFAFA;
          color:#000000;
          }
        </ style >
       < script  type ="text/javascript" > ...
           var xmlHttp;
           var completeDiv;
           var inputField;
           var nameTable;
           var nameTableBody;

          function createXMLHttpRequest()...{
              if(window.ActiveXObject)...{
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              }else if(window.XMLHttpRequest)...{
                  xmlHttp = new XMLHttpRequest();
              }
          }

          function initVars()...{
              inputField = document.getElementById("names");
              nameTable = document.getElementById("name_table");
              completeDiv = document.getElementById("popup");
              nameTableBody = document.getElementById("name_table_body");
          }

          function findNames()...{
              initVars();
              if(inputField.value.length > 0)...{
                  createXMLHttpRequest();
                  var url = "AutoComplete.action?name=" + escape(inputField.value);
                  xmlHttp.open("GET",url,true);
                  xmlHttp.onreadystatechange = callback;
                  xmlHttp.send(null);
              }else...{
                  clearNames();
              }
          }

          function callback()...{
              
              if(xmlHttp.readyState ==4 )...{
                  if(xmlHttp.status == 200)...{
                      setNames(xmlHttp.responseXML.getElementsByTagName("name"));
                  }else if(xmlHttp.status == 204 || xmlHttp.status == 1223)...{
                      clearNames();
                  }
              }
          }

          function setNames(the_names)...{
              clearNames();
             
              var size = the_names.length;
              setOffsets();
              
              var row,cell,txtNode;
              for(var i=0; i<size; i++)...{
                  var nextNode = the_names[i].firstChild.data;
                  row  = document.createElement("tr");
                  cell = document.createElement("td");

                  //cell.onmouseout = function(){this.className = 'mouseOver';};
                  //cell.onmouseover = function(){this.className = 'mouseOut';};
                  cell.setAttribute("bgcolor","#FFFAFA");
                  cell.setAttribute("border","0");
                  cell.onclick = function()...{ populateName(this);};
                  cell.onmouseover = function()...{ doOnMouseOver(this)}
                  cell.onmouseout = function() ...{ doOnMouseOut(this)}
                  txtNode = document.createTextNode(nextNode);
                  cell.appendChild(txtNode);
                  row.appendChild(cell);
                  nameTableBody.appendChild(row);
              }
          }

          function setOffsets()...{
              var end = inputField.offsetWidth;
              var left = calculateOffsetLeft(inputField);
              var top = calculateOffsetTop(inputField) + inputField.offsetHeight;

              completeDiv.style.border = "black 1px solid";
              completeDiv.style.left = left + "px";
              completeDiv.style.top = top + "px";
              completeDiv.style.width = end + "px";
          }

          function calculateOffsetLeft(field)...{
              return calculateOffset(field,"offsetLeft");
          }

          function calculateOffsetTop(field)...{
              return calculateOffset(field,"offsetTop");
          }
          function calculateOffset(field,attr)...{
              var offset = 0;
              while(field)...{
                  offset += field[attr];
                  field = field.offsetParent;
              }
              return offset;
          }

          function populateName(cell)...{
              inputField.value = cell.firstChild.nodeValue;
              clearNames();
          }
          
          function doOnMouseOver(cell)...{
                cell.style.background = "blue";
          }
          
          function doOnMouseOut(cell)...{
                cell.style.background = "#FFFFFF";
          }

          function clearNames()...{
              
              var ind = nameTableBody.childNodes.length;
              for(var i= ind - 1; i>=0; i--)...{
                  nameTableBody.removeChild(nameTableBody.childNodes[i]);
              }
              completeDiv.style.border = "none";
          }
       </ script >
</ head >
   < body >
   < h1 > Ajax Auto Complete Example </ h1 >
  Names:  < input  type ="text"  size ="20"  id ="names"  onkeyup ="findNames();"  style ="height:20px;" >
   < div  style ="position:absolute;"  id ="popup" >
       < table  id ="name_table"  bgcolor ="#FFFAFA"  border ="0"  cellspacing ="0" >
         < tbody  id ="name_table_body" ></ tbody >
       </ table >
   </ div >
   </ body >
</ html >

AutoComplete.java

package  control;
import  java.io. * ;
import  java.util.ArrayList;
import  java.util.Iterator;
import  java.util.List;

import  javax.servlet.http.HttpServletResponse;

import  com.opensymphony.webwork.ServletActionContext;

import  core.BookActionSupport;


public   class  AutoComplete  extends  BookActionSupport ... {
    private List names = new ArrayList();

    public String execute()...{
        names.add("Abe");
        names.add("Abel");
        names.add("Abigail");
        names.add("Abner");
        names.add("Abraham");
        names.add("Marcy");
        names.add("Marge");
        names.add("marie");
        names.add("MarcyMarcyMarcyMarcyMarcy");
        
        String prefix = getParameter("name");
        NameService service = NameService.getInstance(names);
        List matching = service.findNames(prefix);
        try...{
            HttpServletResponse response = ServletActionContext.getResponse();
            PrintWriter out = response.getWriter();
            if(matching.size()>0)...{
                 
                response.setContentType("text/xml");
                response.setHeader("Cache-Control","no-cache");
                out.println("<response>");
                Iterator iter = matching.iterator();
                while(iter.hasNext())...{
                    String name = (String) iter.next();
                    out.println("<name>" + name + "</name>");
                }
                out.println("</response>");
                matching = null;
                service = null;
                out.close();
            }else...{
                response.setStatus(HttpServletResponse.SC_NO_CONTENT);
            }
        }catch(Exception e)...{
            System.out.println(e.getMessage());
        }
        return "";
    }
}

注意:  在这个类中继承了 BookActionSupport类. 这个是继承自webwork框架的ActionSupport类的.主要实现了getParameter()方法.

NameService.java

package  control;

import  java.util.ArrayList;
import  java.util.Iterator;
import  java.util.List;


public   class  NameService  ... {
    private List names;
    
    private NameService(List list_of_names)...{
        this.names = list_of_names;
    }
    
    public static NameService getInstance(List list_of_names)...{
        return new NameService(list_of_names);
    }
    
    public List findNames(String prefix)...{
        String prefix_upper = prefix.toUpperCase();
        List matches = new ArrayList();
        Iterator iter = names.iterator();
        while(iter.hasNext())...{
            String name = (String) iter.next();
            String name_upper_case = name.toUpperCase();
            if(name_upper_case.startsWith(prefix_upper))...{
                boolean result = matches.add(name);
            }
        }
        return matches;
    }
}

xworl.xml

<? xml version="1.0" encoding="UTF-8" ?>

<! DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN" "X:WorkSpaceBFPPropertyconfigwebxwork-1.0.dtd" >

< xwork >

< include  file ="webwork-default.xml" />
     
      < package  name ="helloWorld"  extends ="webwork-default" >
          < interceptors >
              < interceptor  name ="params"  class ="com.opensymphony.xwork.interceptor.ParametersInterceptor" />
          </ interceptors >     

         < default-interceptor-ref  name ="defaultStack" />
         
          < action  name ="AutoComplete"  class ="control.AutoComplete" >
                < result  name ="success" > /jsp/domainS.jsp </ result >
                < interceptor-ref  name ="model-driven" />
               < interceptor-ref  name ="params" />           
          </ action >
      </ package >

</ xwork >

注意: 我的 project的名称是helloworld ,  java类在 control目录下.  请注意区分!

Ok, 代码到此结束.  虽然比google suggest要简单.  但是可以体会一下ajax的用法.