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

程序员文章站 2022-03-26 08:58:13

今天和大家一起利用asp模仿实现google suggest风格的下拉菜单，直接上代码 1.前台代码： <%@language="javascript...

今天和大家一起利用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风格实现下拉菜单效果的代码，希望对大家的学习有所帮助。

上一篇：关于laravel5.5的定时任务详解(demo)

下一篇： ASP函数大全解析