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

首页 > 网络编程 > ASP编程 > 应用技巧 更新日期: 2015-10-15
这篇文章主要介绍了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"  style="width:250px;" 

onBlur="DisSelect();" onKeyUp="findNames();" size="50" maxlength="100">
           <span class="style1">提示:输入关键字,程序自动从库中匹配您

要找的记录,如果不存在自行填写
     </span>
          <div style="position:absolute;top:0;left:0;" >
            <table  bgcolor="#FFFAFA" border="0" cellspacing="0" 

cellpadding="0">      
              <tbody ></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,1
Response.ContentType="text/xml"  
response.Write "<?xml version=""1.0"" encoding=""GB2312"" ?>"
response.Write "<response>"
do while not rs.eof
response.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.movenext
loop
response.Write "</response>"
rs.close
set rs=nothing
%>

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • jquery实现平滑的二级下拉菜单效果
    jquery实现平滑的二级下拉菜单效果
    这篇文章主要介绍了jquery实现平滑的二级下拉菜单效果,可实现鼠标滑过弹出二级下拉菜单,涉及jquery鼠标hover事件及fadeIn与fadeOut事件操作页面元素隐藏及显示的实现技巧,需要的朋友可以参考下本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色 ...
  • JS+CSS实现的经典圆角下拉菜单效果代码
    JS+CSS实现的经典圆角下拉菜单效果代码
    这篇文章主要介绍了JS+CSS实现的经典圆角下拉菜单效果代码,可实现非常经典的圆角下拉菜单效果,涉及JavaScript动态操作页面元素css样式的相关技巧,需要的朋友可以参考下本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角 ...
  • jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
    jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
    这篇文章主要介绍了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码,涉及jquery插件SuperSlide.2.1.js实现滑动切换效果的技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery ...
  • jQuery实现向下滑出的平滑下拉菜单效果
    jQuery实现向下滑出的平滑下拉菜单效果
    这篇文章主要介绍了jQuery实现向下滑出的平滑下拉菜单效果的方法,涉及jquery鼠标事件及页面元素样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现向下滑出的平滑下拉菜单效果.分享给大家供大家参考.具体如下: 这里演示的jQuery向下滑出的下拉平滑菜单,可添加多个菜单选项,修改起来比较灵活的下滑菜单,颜色风格自 ...
  • jQuery实现的fixedMenu下拉菜单效果代码
    jQuery实现的fixedMenu下拉菜单效果代码
    这篇文章主要介绍了jQuery实现的fixedMenu下拉菜单效果代码,通过自定义fixedMenu方法实现点击下拉菜单效果,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了仿Google风格的下拉菜单,其核心实际上是jquery.fixedMenu菜单 ...
猜你喜欢