autoComplete基本代码

.mouseOut {   
    background: #cccccc;   
    color: #FFFAFA;   
    }   
    .mouseOver {   
    background: #FFFAFA;   
    color: #000000;   
    }   


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 = encodeURI("ajax.portal?action=autoComplete&name=" + inputField.value);
                 url = encodeURI(url);    
                xmlHttp.open("GET", url, true);   
                xmlHttp.onreadystatechange = callback;   
                xmlHttp.send(null);   
            } else {   
                clearNames();   
            }   
        }   
  
        function callback() {   
            if (xmlHttp.readyState == 4) {   
                if (xmlHttp.status == 200) {
                    clearNames();   
                    var rows = xmlHttp.responseXML.getElementsByTagName("row").length;
                    var row,cell,txtNode;
                    for(var i=0;i<rows;i++){
                    	var value = xmlHttp.responseXML.getElementsByTagName("row")[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);};
		                txtNode = document.createTextNode(value);
		                cell.appendChild(txtNode);   
		                row.appendChild(cell);   
		                nameTableBody.appendChild(row); 
                    }
                } else if (xmlHttp.status == 204){   
                    clearNames();   
                }   
            }   
        }
        
        function populateName(cell) {   
            inputField.value = cell.firstChild.nodeValue;   
            clearNames();   
        }   
  
        function clearNames() {   
            var ind = nameTableBody.childNodes.length;   
            for (var i = ind - 1; i >= 0 ; i--) {   
                 nameTableBody.removeChild(nameTableBody.childNodes[i]);   
            }   
        }

<html:form action="/ajax.portal" method="post">
名字:   
<input type="text" id="names" οnkeyup="findNames();"  style="height:20;" width="100px"/>
        <div style="border-width:medium;border-color:#000000;margin-left:40px;width:160px;"  id="popup">  
            <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0" width="156px";/>
                <tbody id="name_table_body">
                
                </tbody>  
            </table>  
        </div> 
</html:form>

if("autoComplete".equals(form.getAction())){
		        response.setContentType("text/xml; charset=UTF-8");//xml
		        response.setHeader("Cache-Control","no-cache");//HTTP1.1
		        response.setHeader("Pragma","no-cache");//HTTP1.0
		        response.setDateHeader("Expires",0);
		        PrintWriter out=null;
		        String name = request.getParameter("name");   
				try {
					out = response.getWriter();
//					name = new String(name.getBytes("ISO8859-1"), "UTF-8"); 
					name=java.net.URLDecoder.decode(name,"UTF-8");
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}   
		        System.out.println("name="+name);
		        List names=new ArrayList();
		        names.add("abc");
		        names.add("abd");
		        names.add("ace");
		        names.add("acd");
		        names.add("bcd");
		        names.add("bce");
		        names.add("bcf");
		        names.add("cdf");
		        names.add("cdg");
		        names.add("dth");
		        names.add("dfc");
		        names.add("ddt");
		        names.add("ddd");
		        names.add("xdd");
		        names.add("ydd");
		        names.add("zdd");
		        List matches = Util.findMatches(names,name);   
		        System.out.println("matches.size="+matches.size());
		        if (matches.size() > 0) {
		            StringBuffer sb = new StringBuffer();
		            sb.append("<root>");   
		            Iterator iter = matches.iterator();   
		            while (iter.hasNext()) {
		                sb.append("<row>" + (String)iter.next() + "</row>");   
		            }   
		            sb.append("</root>");   
		            out.write(sb.toString());
		            out.close();
//		            System.out.println("sb.toString()="+sb.toString());
		  
		        } else {   
		            response.setStatus(HttpServletResponse.SC_NO_CONTENT);   
		        }
		        return mapping.findForward("ajax");

		}