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

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

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

2.后台search.asp异步查询数据页面
把sql语句和要显示的字段改为自己的数据库相对应格式就可以了。

<！--#include virtual="conn.asp" --><%keyword=request.QueryString（"names"）sql="select lgid,lgmc from lg where lgmc like "%"&keyword&"%" order by lgid desc"set rs=server.CreateObject（"adodb.recordset"）rs.open sql,conn,1,1Response.ContentType="text/xml"  response.Write "<?xml version=""1.0"" encoding=""GB2312"" ?>"response.Write "<response>"do while not rs.eofresponse.Write "<content>"response.Write "<name>"&rs（"lgmc"）&"</name>""response.Write "<userid>"&rs（"userid"）&"</userid>""response.Write "<startime>"&rs（"startime"）&"</startime>""response.Write "<endtime>"&rs（"endtime"）&"</endtime>"response.Write "</content>"rs.movenextloopresponse.Write "</response>"rs.closeset rs=nothing%>

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