首页 > 编程 > ASP > 正文

ASP模仿google suggest风格实现下拉菜单效果

2024-05-04 11:10:06
字体:
来源:转载
供稿:网友

这篇文章主要介绍了ASP模仿google suggest风格实现下拉菜单效果,需要的朋友可以参考下

今天和大家一起利用ASP模仿实现google suggest风格的下拉菜单,直接上代码

1.前台代码:

 

 
  1. <%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%> 
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3.  
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  5. <html xmlns="http://www.w3.org/1999/xhtml"
  6. <style type="text/css"
  7. <!-- 
  8. .style1 {color: #FF0000} 
  9. .mouseOut 
  10. font-size:12px; 
  11. background: #708090; 
  12. color: #FFFAFA; 
  13.    
  14. .mouseOver 
  15. font-size:12px; 
  16. background: #FFFAFA; 
  17. color: #000000; 
  18. --> 
  19. </style> 
  20.    <script type="text/javascript" language="javascript"
  21.     var xmlHttp; 
  22.     var completeDiv; 
  23.     var inputField; 
  24.     var nameTable; 
  25.     var nameTableBody; 
  26.     var flag=false
  27.    
  28.     function createXMLHttpRequest() { 
  29.       if (window.ActiveXObject) { 
  30.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  31.       } 
  32.       else if (window.XMLHttpRequest) { 
  33.         xmlHttp = new XMLHttpRequest();         
  34.       } 
  35.     } 
  36.      
  37.     function setflag(){ 
  38.       flag = true
  39.     } 
  40.      
  41.     function DisSelect() 
  42.     { 
  43.       if(flag==false
  44.       document.getElementById("popup").style.display="none"
  45.     } 
  46.    
  47.     function initVars() { 
  48.       inputField = document.getElementById("frmchangshang");       
  49.       nameTable = document.getElementById("name_table"); 
  50.       completeDiv = document.getElementById("popup"); 
  51.       nameTableBody = document.getElementById("name_table_body"); 
  52.       document.getElementById("popup").style.display="block"
  53.     } 
  54.    
  55.     function findNames() { 
  56.       initVars(); 
  57.       if (inputField.value.length > 0) 
  58.   { 
  59.         createXMLHttpRequest(); 
  60.         var url = "search.asp?names=" + inputField.value;  
  61.         xmlHttp.open("GET", url, true); 
  62.         xmlHttp.onreadystatechange = callback; 
  63.         xmlHttp.send(null); 
  64.       } 
  65.   else 
  66.   { 
  67.         clearNames(); 
  68.       } 
  69.     } 
  70.    
  71.     function callback() { 
  72.       if (xmlHttp.readyState == 4) { 
  73.         if (xmlHttp.status == 200) 
  74.         { 
  75.    try 
  76.           { 
  77.             var name = xmlHttp.responseXML.getElementsByTagName("name"
  78.  
  79. [0].firstChild.data; 
  80.           } 
  81.           catch(e) 
  82.           { 
  83.             document.getElementById("popup").style.display="none"
  84.             clearNames(); 
  85.           } 
  86.           setNames(xmlHttp.responseXML.getElementsByTagName("content")); 
  87.         } 
  88.         else if (xmlHttp.status == 204) 
  89.         { 
  90.           clearNames(); 
  91.         } 
  92.       } 
  93.     } 
  94.      
  95.     function setNames(the_names) {       
  96.       clearNames(); 
  97.       var size = the_names.length; 
  98.       setOffsets(); 
  99.       var row,cell,spans; 
  100.       for (var i = 0; i < size; i++) { 
  101.         //var nextNode = the_names[i].firstChild.data; 
  102.   var e = the_names[i]; 
  103.   //取得子节点内容,重新装载为数组 
  104.   var nextNode=e.getElementsByTagName("name")[0].firstChild.data; 
  105.   //创建tr,td,span元素 
  106.         row =document.createElement("tr"); 
  107.         cell =document.createElement("td"); 
  108.   //spans=document.createElement("span"); 
  109.   //设置cell属性 
  110.         cell.onmouseout = function() {this.className='mouseOver'; flag=false;}; 
  111.         cell.onmouseover = function() {this.className='mouseOut'; flag=true;}; 
  112.         cell.setAttribute("bgcolor","#FFFAFA"); 
  113.         cell.setAttribute("border","0"); 
  114.         //cell.setAttribute("onmouseover","setflag()"); 
  115.         cell.onclick = function() { populateName(this); }; 
  116.   //将nextNode添加到td 
  117.   var txtName = document.createTextNode(nextNode); 
  118.   cell.appendChild(txtName); 
  119.   //装载隐藏数据到span元素 
  120.   row.appendChild(cell); 
  121.         nameTableBody.appendChild(row); 
  122.       } 
  123.     } 
  124.    
  125.     function setOffsets() { 
  126.       var end = inputField.offsetWidth; 
  127.       var left = calculateOffsetLeft(inputField); 
  128.       var top = calculateOffsetTop(inputField) + inputField.offsetHeight; 
  129.    
  130.       completeDiv.style.border = "black 1px solid"
  131.       completeDiv.style.left = left + "px"
  132.       completeDiv.style.top = top + "px"
  133.       nameTable.style.width="400px"
  134.     } 
  135.      
  136.     function calculateOffsetLeft(field) { 
  137.      return calculateOffset(field, "offsetLeft"); 
  138.     } 
  139.    
  140.     function calculateOffsetTop(field) { 
  141.      return calculateOffset(field, "offsetTop"); 
  142.     } 
  143.    
  144.     function calculateOffset(field, attr) { 
  145.      var offset = 0; 
  146.      while(field) { 
  147.       offset += field[attr]; 
  148.       field = field.offsetParent; 
  149.      } 
  150.      return offset; 
  151.     } 
  152.    
  153.     function populateName(cell) { 
  154.   //填充数据到web页面,cell---->td对象 
  155.       inputField.value = cell.firstChild.nodeValue; 
  156.       clearNames(); 
  157.     } 
  158.     //清除列表数组 
  159.     function clearNames() { 
  160.       var ind = nameTableBody.childNodes.length; 
  161.       for (var i = ind - 1; i >= 0 ; i--) { 
  162.          nameTableBody.removeChild(nameTableBody.childNodes[i]); 
  163.       } 
  164.       completeDiv.style.border = "none"
  165.     } 
  166. </script> 
  167. <head> 
  168. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  169. <title>Untitled Document</title> 
  170. </head> 
  171.    
  172. <body> 
  173. <input name="frmchangshang" class="InputText" id="frmchangshang" style="width:250px;" 
  174.  
  175. onBlur="DisSelect();" onKeyUp="findNames();" size="50" maxlength="100"
  176.           <span class="style1">提示:输入关键字,程序自动从库中匹配您 
  177.  
  178. 要找的记录,如果不存在自行填写 
  179.      </span> 
  180.           <div style="position:absolute;top:0;left:0;" id="popup"
  181.             <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" 
  182.  
  183. cellpadding="0">       
  184.               <tbody id="name_table_body"></tbody> 
  185.             </table> 
  186.          </div> 
  187. </body> 
  188. </html> 

2.后台search.asp异步查询数据页面

把sql语句和要显示的字段改为自己的数据库相对应格式就可以了。

 

 
  1. <!--#include virtual="conn.asp" --> 
  2. <% 
  3. keyword=request.QueryString("names"
  4. sql="select lgid,lgmc from lg where lgmc like '%"&keyword&"%' order by lgid desc" 
  5. set rs=server.CreateObject("adodb.recordset"
  6. rs.open sql,conn,1,1 
  7. Response.ContentType="text/xml"   
  8. response.Write "<?xml version=""1.0"" encoding=""GB2312"" ?>" 
  9. response.Write "<response>" 
  10. do while not rs.eof 
  11. response.Write "<content>" 
  12. response.Write "<name>"&rs("lgmc")&"</name>" 
  13. 'response.Write "<userid>"&rs("userid")&"</userid>" 
  14. 'response.Write "<startime>"&rs("startime")&"</startime>" 
  15. 'response.Write "<endtime>"&rs("endtime")&"</endtime>" 
  16. response.Write "</content>" 
  17. rs.movenext 
  18. loop 
  19. response.Write "</response>" 
  20. rs.close 
  21. set rs=nothing 
  22. %> 

以上就是ASP模仿google suggest风格实现下拉菜单效果的代码,希望对大家的学习有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表