ASPはgoogle suggestスタイルを真似てドロップダウンメニュー効果を実現

6821 ワード

今日は皆さんと一緒にASPを利用してGoogle suggestスタイルを実現したドロップダウンメニューを真似て、直接コードをアップします
1.フロントコード:





   
    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";
    }



Untitled Document

  


             :     ,          

     ,         
     
          


2.バックグラウンドasp非同期クエリーデータページsql文と表示するフィールドを自分のデータベース対応フォーマットに変更すればいいです.


"
response.Write ""
do while not rs.eof
response.Write ""
response.Write ""&rs("lgmc")&""
'response.Write ""&rs("userid")&""
'response.Write ""&rs("startime")&""
'response.Write ""&rs("endtime")&""
response.Write ""
rs.movenext
loop
response.Write ""
rs.close
set rs=nothing
%>

以上、ASPがgoogle suggestスタイルを真似てドロップダウンメニューの効果を実現するコードで、皆さんの勉強に役立つことを願っています.