• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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">
              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>

    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风格实现下拉菜单效果的代码,希望对大家的学习有所帮助。

    您可能感兴趣的文章:
    • Google Suggest ;-) 基于js的动态下拉菜单
    • ASP+JS三级联动下拉菜单[调用数据库数据]
    • AJAX实现仿Google Suggest效果
    • 仿google搜索提示 SuggestFramework的使用
    • ASP.NET 2.0写无限级下拉菜单
    • ajax Suggest类似google的搜索提示效果
    • google suggest 下拉菜单实现代码(asp.net版本)
    • asp.net DropDownList 三级联动下拉菜单实现代码
    上一篇:asp+JMAIL实现发送邮件
    下一篇:简单的ASP统计制作实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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