ASP模仿google suggest风格实现下拉菜单效果
2018-09-06 12:20
今天和大家一起利用ASP模仿实现google suggest风格的下拉菜单，直接上代码
1.前台代码：
<%@LANGUAGE=JAVASCRIPT CODEPAGE=936%> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN .mouseOver { font-size:12px; background: #FFFAFA; color: #000000; } --> </style> <script type=text/javascript language=javascript> var xmlHttp; var completeDiv; var inputField; var nameTable; var nameTableBody; var flag=false; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function setflag(){ flag = true; } function DisSelect() { if(flag==false) document.getElementById(popup).style.display=none; } function initVars() { inputField = document.getElementById(frmchangshang); nameTable = document.getElementById(name_table); completeDiv = document.getElementById(popup); nameTableBody = document.getElementById(name_table_body); document.getElementById(popup).style.display=block; } function findNames() { initVars(); if (inputField.value.length > 0) { createXMLHttpRequest(); var url = search.asp?names= + 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) { try { var name = xmlHttp.responseXML.getElementsByTagName(name) [0].firstChild.data; } catch(e) { document.getElementById(popup).style.display=none; clearNames(); } setNames(xmlHttp.responseXML.getElementsByTagName(content)); } else if (xmlHttp.status == 204) { clearNames(); } } } function setNames(the_names) { clearNames(); var size = the_names.length; setOffsets(); var row,cell,spans; for (var i = 0; i < size; i++) { //var nextNode = the_names[i].firstChild.data; var e = the_names[i]; //取得子节点内容，重新装载为数组 var nextNode=e.getElementsByTagName(name)[0].firstChild.data; //创建tr，td，span元素 row=document.createElement(tr); cell =document.createElement(td); //spans=document.createElement(span); //设置cell属性 cell.onmouseout = function() {this.className=mouseOver; flag=false;}; cell.onmouseover = function() {this.className=mouseOut; flag=true;}; cell.setAttribute(bgcolor,#FFFAFA); cell.setAttribute(border,0); //cell.setAttribute(onmouseover,setflag()); cell.onclick = function() { populateName(this); }; //将nextNode添加到td var txtName = document.createTextNode(nextNode); cell.appendChild(txtName); //装载隐藏数据到span元素 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; = top + px; nameTable.style.width=400px; } 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) { //填充数据到web页面，cell---->td对象 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> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <title>Untitled Document</title> </head> <body> <input name=frmchangshang class=InputText id=frmchangshangstyle=width:250px; onBlur=DisSelect(); onKeyUp=findNames(); size=50 maxlength=100> <span class=style1>提示：输入关键字，程序自动从库中匹配您 要找的记录，如果不存在自行填写 </span> <div style=position:absolute;top:0;left:0; id=popup> <table id=name_table bgcolor=#FFFAFA border=0 cellspacing=0 cellpadding=0> <tbody id=name_table_body></tbody> </table> </div> </body> </html>
2.后台search.asp异步查询数据页面
把sql语句和要显示的字段改为自己的数据库相对应格式就可以了。
以上就是ASP模仿google suggest风格实现下拉菜单效果的代码，希望对大家的学习有所帮助。
文章标题：ASP模仿google suggest风格实现下拉菜单效果
文章链接：http://soscw.com/index.php/essay/10216.html