我做得是类似google的自动完成
大概意思是在html的一个文本框输入一个字 然后通过ajax传递给后台的servlet servlet通过javabean查询出包含这个字的信息后通过xml传递回html 然后html通过js显示出来
现在的问题是js显示出来的结果都是问号
请帮帮我
html
- HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <head> <title>Ajax Auto Complete</title> <!--设置鼠标的样式表--> <style type="text/css"> .mouseOut { background: #708090; color: #FFFAFA; } .mouseOver { background: #FFFAFA; color: #000000; } </style> <script type="text/javascript" charset="GBK"> 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");//div nameTableBody = document.getElementById("name_table_body");//tbody } function findNames() { initVars();//初始化变量 if (inputField.value.length > 0) {//如果文本框有内容就用Ajax获得数组XML createXMLHttpRequest(); var url = "/test/autocompletesrv?names=" + inputField.value + "&timeStamp=" + new Date().getTime(); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } else {//清空tbody，并将div的style设为不可见 clearNames(); } } function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data; alert(name); setNames(xmlHttp.responseXML.getElementsByTagName("name")); } else if (xmlHttp.status == 204){//清空tbody，并将div的style设为不可见 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); } ; 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"; nameTable.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(); } //清空tbody，并将div的style设为不可见 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:20;"/> <div style="position:absolute;" id="popup"> <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"/> <tbody id="name_table_body"></tbody> </table> </div> </body></html>