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">
<!--
.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风格实现下拉菜单效果的代码，希望对大家的学习有所帮助。
相关推荐
-
AJAX实现仿Google Suggest效果
修复了一些细节代码(支持持续按键事件) *项目名称:AJAX实现类Google Suggest效果*作者:草履虫(也就是蓝色的ecma)*联系:caolvchong@gmail.com*时间:2007-7-7*工具: DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)*测试平台:Firefox2.0,IE6.0,IE7.0*演示地址:http://finish.3322.org/sugges
-
asp.net DropDownList 三级联动下拉菜单实现代码
复制代码 代码如下: if (!IsPostBack) { //一级分类列表 this.DropDownList1.DataSource = dsbb.SelectSubjct1(); this.DropDownList1.DataTextField = "cName"; this.DropDownList1.DataValueField = "Ccode"; this.DropDownList1.DataBind(); this.DropDownList1.Ite
-
google suggest 下拉菜单实现代码(asp.net版本)
1.suggest.js 复制代码保存为suggest.js在你需要的页面引用就行了 复制代码 代码如下: //建立跨浏览器的xmlHttp对象引用 var xmlHttp; var k=-1; try { xmlHttp=new XMLHttpRequest(); } catch(e) { var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLH
-
ajax Suggest类似google的搜索提示效果
实现: <script type="text/javascript" src="/path/to/SuggestFramework.js"></script> <script type="text/javascript">window.onload = initializeSuggestFramework;</script> 有了上面两句后,每个取了名的文本框会多出五个属性: 1.action 必须
-
ASP.NET 2.0写无限级下拉菜单
复制代码 代码如下: <%@ Page Language="C#" %> <html> <!-- ASP.NET 2.0的例子 --> <head runat="server"> </head> <body> <form runat="server"> <h3>下拉菜单的例子</h3> <!-- Use declarative syn
-
仿google搜索提示 SuggestFramework的使用
一.首先来看一下什么是suggest framework Suggest Framework 故名思意,就是仿 Google Suggest 的一个小框架,让你的文本框也有提示功能.利用suggest framework你可以在自己的网站上很轻松实现"输入提示"效果,这种效果会很大程度上提高用户体验,提高搜索效率. 一个页面上可以出现多个搜索框,每个搜索框都可以实现单独配置. 此框架无浏览器限制,基本兼容当前的绝大多数浏览器,包括Internet Explorer 5+ (Win/Ma
-
ASP+JS三级联动下拉菜单[调用数据库数据]
网上三级菜单多是多但是代码都比较烦,我这个应该说还是比较直观的:'肯定先要连接数据库了,不用说了 '数据库结构 '类别1表名称:a 字段:ID,Name 说明:ID为主键是类别1的ID值,Name为类别1的名称 '类别2表名称:aa 字段:ID,aID,Name 说明:ID为主键是类别2的ID值,aID为所属类别1的ID值,Name为类别2的名称 '类别3表名称:aaa 字段:ID,aID,aaID,Name 说明:ID为主键是类别3的ID值,aID为所属类别1的ID值,aaID为所
-
Google Suggest ;-) 基于js的动态下拉菜单
基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中.能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录.试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤. 另外:这一动态列表功能也应用在GMail的地址栏自动输入完成中,如图: Google自动完成的源代码如下:// Copyright 2004 and onwards Google Inc. var w
-
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.d
-
jQuery实现灰蓝风格标准二级下拉菜单效果代码
本文实例讲述了jQuery实现灰蓝风格标准二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
-
jquery实现平滑的二级下拉菜单效果
本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下: <!DOCTYPE html>
-
jQuery实现的fixedMenu下拉菜单效果代码
本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了仿Google风格的下拉菜单,其核心实际上是jquery.fixedMenu菜单,使用了jquery.fixedMenu.js和fixedMenu_style.css文件,已在代码中加注释,你可以从本代码中分享现这两个文件,然后重新引用.本菜单在鼠标点击主菜单的时候可向下显示二级子菜单,在火狐或Chrome浏览器下,还可显示菜单阴影效果. 运行效果截图如下: 在线演示地址如下: htt
-
AngularJS service之select下拉菜单效果
本文实例为大家分享了service之select下拉菜单效果的具体代码,供大家参考,具体内容如下 <!-- $watch:持续监听数据上的变化,更新界面 --> <!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <meta charset="utf-8"> <
-
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015
-
jquery实现简单的二级导航下拉菜单效果
本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl
-
JS+CSS实现的经典圆角下拉菜单效果代码
本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
jQuery实现向下滑出的平滑下拉菜单效果
本文实例讲述了jQuery实现向下滑出的平滑下拉菜单效果.分享给大家供大家参考.具体如下: 这里演示的jQuery向下滑出的下拉平滑菜单,可添加多个菜单选项,修改起来比较灵活的下滑菜单,颜色风格自己可修改,不多介绍了,感兴趣的运行一下代码看效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-xlph-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
-
jquery实现的淡入淡出下拉菜单效果
本文实例讲述了jquery实现的淡入淡出下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jQuery带有淡入淡出效果的下拉菜单,可作为一个下拉导航菜单的模板,移动鼠标到一级主菜单上看一看,在有包括二级子菜单的菜单项上悬停时,二级菜单渐变显示出来,兼容性也是很不错的,希望大家喜欢哈. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/ 具体代码如下: <!DOCTYPE