ASP模仿google suggest风格实现下拉菜单效果
网络编程 2021-07-05 10:58www.168986.cn编程入门
这篇文章主要介绍了ASP模仿google suggest风格实现下拉菜单效果，需要的朋友可以参考下
今天和大家一起利用ASP模仿实现google suggest风格的下拉菜单，直接上代码
1.前台代码
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./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 pleteDiv;
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");
pleteDiv = 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 = calculateOffsetTop(inputField) + inputField.offsetHeight;
pleteDiv.style.border = "black 1px solid";
pleteDiv.style.left = left + "px";
pleteDiv.style. = + "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]);
}
pleteDiv.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;: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风格实现下拉菜单效果的代码，希望对大家的学习有所帮助。
上一篇：简单的ASP统计制作实例
下一篇：asp+JMAIL实现发送邮件
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程