模仿google suggest 下拉菜单

最新推荐文章于 2024-08-09 06:13:01 发布
秦地小哥
最新推荐文章于 2024-08-09 06:13:01 发布
阅读量291
点赞数
分类专栏：前台资料文章标签： google function xmlhttprequest callback table xhtml
前台资料专栏收录该内容
6 篇文章 0 订阅
订阅专栏
 
      http://zhzhiqun2005.iteye.com/blog/516850 
     
      <%@LANGUAGE= 
      "JAVASCRIPT" 
      CODEPAGE= 
      "936" 
      %> 
     
      <!DOCTYPE html PUBLIC 
      "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
      > 
     
      <html xmlns= 
      "http://www.w3.org/1999/xhtml" 
      > 
     
      <style type= 
      "text/css" 
      > 
     
      <!--  
     
      .style1 {color: #FF0000} 
     
      .mouseOut  
     
      {  
     
      font-size:12px;  
     
      background: #708090; 
     
      color: #FFFAFA;  
     
      }  
     
      .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" 
      ; 
     
      　　　　　　completeDiv.style.top = 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= 
      "frmchangshang" 
      　style= 
      "width:250px;" 
      onBlur= 
      "DisSelect();" 
      onKeyUp= 
      "findNames();" 
      size= 
      "50" 
      maxlength= 
      "100" 
      > 
     
      　　　　　　　　　　&nbsp;<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>
秦地小哥
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模仿google suggest 下拉菜单

http://zhzhiqun2005.iteye.com/blog/516850 &lt;%@LANGUAGE="JAVASCRIPT"CODEPAGE="936"%&gt;&lt;!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
复制链接

扫一扫
专栏目录