<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <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"> 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(); var mails = ["@163.com","@sina.com","@gmail.com"]; if (inputField.value.length > 0) { clearNames(); var size = mails.length; setoffsets(); var row,cell,txtNode; var dizhi = inputField.value; for (var i = 0; i < size; i++) { var nextNode = dizhi + mails[i]; 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); } return; } if (inputField.value.length > 0) { createXMLHttpRequest(); var url = "AutoCompleteServlet?names=" + 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) { var name = xmlHttp.responseXML .getElementsByTagName("name")[0].firstChild.data; setNames(xmlHttp.responseXML.getElementsByTagName("name")); } else if (xmlHttp.status == 204){ clearNames(); } } } function setNames(the_names) { clearNames(); var size = the_names.length; setoffsets(); var row,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","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(); } function clearNames() { var ind = naMetableBody.childNodes.length; for (var i = ind - 1; i >= 0 ; i--) { naMetableBody.removeChild(naMetableBody.childNodes[i]); } completeDiv.style.border = "none"; } function clearDiv(){ completeDiv.style.display="none"; } </script> </head> <body> <h1>showAllEmailFixes.html</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>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <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"> 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(); var mails = ["@163.com","@sina.com","@gmail.com"]; if (inputField.value.length > 0) { clearNames(); var size = mails.length; setoffsets(); var row,cell,txtNode; var dizhi = inputField.value; for (var i = 0; i < size; i++) { var nextNode = dizhi + mails[i]; 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); } return; } if (inputField.value.length > 0) { createXMLHttpRequest(); var url = "AutoCompleteServlet?names=" + 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) { var name = xmlHttp.responseXML .getElementsByTagName("name")[0].firstChild.data; setNames(xmlHttp.responseXML.getElementsByTagName("name")); } else if (xmlHttp.status == 204){ clearNames(); } } } function setNames(the_names) { clearNames(); var size = the_names.length; setoffsets(); var row,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","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(); } function clearNames() { var ind = naMetableBody.childNodes.length; for (var i = ind - 1; i >= 0 ; i--) { naMetableBody.removeChild(naMetableBody.childNodes[i]); } completeDiv.style.border = "none"; } function clearDiv(){ completeDiv.style.display="none"; } </script> </head> <body> <h1>showAllEmailFixes.html</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>
