今天和大家一起利用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">
<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风格实现下拉菜单效果的代码，希望对大家的学习有所帮助。
如对本文有疑问， 点击进行留言回复！！
asp中Request.ServerVariables的参数集合
网友评论