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").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); } }<html:form action="/ajax.portal" method="post">名字: <input type="text" id="names" onkeyup="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 blocke.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");}
页:
[1]