ASP模仿google suggest風格實現下拉菜單效果

2024-05-04 11:10:06

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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">



</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語句和要顯示的字段改為自己的數據庫相對應格式就可以了。

<%

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

%>