自動補全@163.com

時間 2020-01-28

標籤自動補全 163.com com 简体版

原文原文鏈接

<!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, 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(); } 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>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>

1. sf2gis@163.com
2. 自動補全
3. pycharm 編寫HTML自動補全與自定義自動補全
4. Eclipse自動補全
5. Eclipse 自動補全
6. Tab 自動補全
7. jQuery 自動補全
8. Git 自動補全
9. plsql自動補全
10. pyqt 自動補全
更多相關文章...
• Spring自動裝配Bean - Spring教程
• SQLite Autoincrement（自動遞增） - SQLite教程
• SpringBoot中properties文件不能自動提示解決方法
• IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決

相關標籤/搜索

117367462li.blog.163.com

sf2gis@163.com

longshuai2007.blog.163.com

Docker命令大全

SQLite教程

PHP教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。