日期:2014-05-18 浏览次数:20799 次
<!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; com