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

作者:袖梨 2023-08-22

今天和大家一起利用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

%>

相关文章

精彩推荐