文章詳情頁

ASP模仿google suggest風(fēng)格實(shí)現(xiàn)下拉菜單效果

瀏覽：197日期：2022-06-05 16:09:34

今天和大家一起利用ASP模仿實(shí)現(xiàn)google suggest風(fēng)格的下拉菜單，直接上代碼

1.前臺(tái)代碼：

<%@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];
　　//取得子節(jié)點(diǎn)內(nèi)容，重新裝載為數(shù)組
　　var nextNode=e.getElementsByTagName("name")[0].firstChild.data;
　　//創(chuàng)建tr，td，span元素
　　　　　　　　row　=document.createElement("tr");
　　　　　　　　cell =document.createElement("td");
　　//spans=document.createElement("span");
　　//設(shè)置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);
　　//裝載隱藏?cái)?shù)據(jù)到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) {
　　//填充數(shù)據(jù)到web頁面，cell---->td對(duì)象
　　　　　　inputField.value = cell.firstChild.nodeValue;
　　　　　　clearNames();
　　　　}
　　　　//清除列表數(shù)組
　　　　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" id="frmchangshang"　style="width:250px;" 

onBlur="DisSelect();" onKeyUp="findNames();" size="50" maxlength="100">
　　　　　　　　　　&nbsp;<span>提示：輸入關(guān)鍵字，程序自動(dòng)從庫中匹配您

要找的記錄，如果不存在自行填寫
　　　　 </span>
　　　　　　　　　　<div 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.后臺(tái)search.asp異步查詢數(shù)據(jù)頁面
把sql語句和要顯示的字段改為自己的數(shù)據(jù)庫相對(duì)應(yīng)格式就可以了。

<!--#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風(fēng)格實(shí)現(xiàn)下拉菜單效果的代碼，希望對(duì)大家的學(xué)習(xí)有所幫助。

ASP

上一條：簡單的ASP統(tǒng)計(jì)制作實(shí)例下一條：asp+JMAIL實(shí)現(xiàn)發(fā)送郵件

相關(guān)文章：

1. JavaScript實(shí)現(xiàn)HTML導(dǎo)航欄下拉菜單2. 解決vue動(dòng)態(tài)下拉菜單有數(shù)據(jù)未反應(yīng)的問題3. js面向?qū)ο蠓庋b級(jí)聯(lián)下拉菜單列表的實(shí)現(xiàn)步驟4. 自定義Django Form中choicefield下拉菜單選取數(shù)據(jù)庫內(nèi)容實(shí)例5. ASP中SELECT下拉菜單同時(shí)獲取VALUE和TEXT值的實(shí)現(xiàn)代碼6. javascript實(shí)現(xiàn)下拉菜單效果

排行榜

					
					Python使用shutil模塊實(shí)現(xiàn)文件拷貝
Java繁體中文處理完全攻略（二）
python 實(shí)現(xiàn)aes256加密
如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能
JavaScript快速實(shí)現(xiàn)日歷效果
Python 如何將integer轉(zhuǎn)化為羅馬數(shù)(3999以內(nèi))
關(guān)于Java下奇怪的Base64詳解
Spring security 自定義過濾器實(shí)現(xiàn)Json參數(shù)傳遞并兼容表單參數(shù)(實(shí)例代碼)
SpringBoot Shiro 權(quán)限注解不起作用的解決方法
Python基礎(chǔ)之numpy庫的使用
Effective java學(xué)習(xí)筆記4:避免創(chuàng)建重復(fù)對(duì)象
				