ASP模仿google suggest风格实现下拉菜单效果(模仿aj)这都可以

随心笔谈1年前 (2023)发布 admin
100 0


<%@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″>
           <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>

© 版权声明

相关文章