ASP模仿google suggest风格实现下拉菜单效果
今天和大家一起利用ASP模仿实现googlesuggest风格的下拉菜单，直接上代码
1.前台代码：
<%@LANGUAGE="JAVASCRIPT"CODEPAGE="936"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<styletype="text/css">
<!--
.style1{color:#FF0000}
.mouseOut
{
font-size:12px;
background:#708090;
color:#FFFAFA;
}
.mouseOver
{
font-size:12px;
background:#FFFAFA;
color:#000000;
}
-->
</style>
<scripttype="text/javascript"language="javascript">
varxmlHttp;
varcompleteDiv;
varinputField;
varnameTable;
varnameTableBody;
varflag=false;
functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
elseif(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}
}
functionsetflag(){
flag=true;
}
functionDisSelect()
{
if(flag==false)
document.getElementById("popup").style.display="none";
}
functioninitVars(){
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";
}
functionfindNames(){
initVars();
if(inputField.value.length>0)
{
createXMLHttpRequest();
varurl="search.asp?names="+inputField.value;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
else
{
clearNames();
}
}
functioncallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200)
{
try
{
varname=xmlHttp.responseXML.getElementsByTagName("name")
[0].firstChild.data;
}
catch(e)
{
document.getElementById("popup").style.display="none";
clearNames();
}
setNames(xmlHttp.responseXML.getElementsByTagName("content"));
}
elseif(xmlHttp.status==204)
{
clearNames();
}
}
}
functionsetNames(the_names){
clearNames();
varsize=the_names.length;
setOffsets();
varrow,cell,spans;
for(vari=0;i<size;i++){
//varnextNode=the_names[i].firstChild.data;
vare=the_names[i];
//取得子节点内容，重新装载为数组
varnextNode=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
vartxtName=document.createTextNode(nextNode);
cell.appendChild(txtName);
//装载隐藏数据到span元素
row.appendChild(cell);
nameTableBody.appendChild(row);
}
}
functionsetOffsets(){
varend=inputField.offsetWidth;
varleft=calculateOffsetLeft(inputField);
vartop=calculateOffsetTop(inputField)+inputField.offsetHeight;
completeDiv.style.border="black1pxsolid";
completeDiv.style.left=left+"px";
completeDiv.style.top=top+"px";
nameTable.style.width="400px";
}
functioncalculateOffsetLeft(field){
returncalculateOffset(field,"offsetLeft");
}
functioncalculateOffsetTop(field){
returncalculateOffset(field,"offsetTop");
}
functioncalculateOffset(field,attr){
varoffset=0;
while(field){
offset+=field[attr];
field=field.offsetParent;
}
returnoffset;
}
functionpopulateName(cell){
//填充数据到web页面，cell---->td对象
inputField.value=cell.firstChild.nodeValue;
clearNames();
}
//清除列表数组
functionclearNames(){
varind=nameTableBody.childNodes.length;
for(vari=ind-1;i>=0;i--){
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
completeDiv.style.border="none";
}
</script>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>UntitledDocument</title>
</head>
<body>
<inputname="frmchangshang"class="InputText"id="frmchangshang"style="width:250px;"
onBlur="DisSelect();"onKeyUp="findNames();"size="50"maxlength="100">
<spanclass="style1">提示：输入关键字，程序自动从库中匹配您
要找的记录，如果不存在自行填写
</span>
<divstyle="position:absolute;top:0;left:0;"id="popup">
<tableid="name_table"bgcolor="#FFFAFA"border="0"cellspacing="0"
cellpadding="0">
<tbodyid="name_table_body"></tbody>
</table>
</div>
</body>
</html>
2.后台search.asp异步查询数据页面
把sql语句和要显示的字段改为自己的数据库相对应格式就可以了。
<!--#includevirtual="conn.asp"-->
<%
keyword=request.QueryString("names")
sql="selectlgid,lgmcfromlgwherelgmclike'%"&keyword&"%'orderbylgiddesc"
setrs=server.CreateObject("adodb.recordset")
rs.opensql,conn,1,1
Response.ContentType="text/xml"
response.Write"<?xmlversion=""1.0""encoding=""GB2312""?>"
response.Write"<response>"
dowhilenotrs.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
setrs=nothing
%>
以上就是ASP模仿googlesuggest风格实现下拉菜单效果的代码，希望对大家的学习有所帮助。