這篇文章主要介紹了ASP模仿google suggest風格實現下拉菜單效果,需要的朋友可以參考下
今天和大家一起利用ASP模仿實現google suggest風格的下拉菜單,直接上代碼
1.前台代碼:
- <%@LANGUAGE=JAVASCRIPTCODEPAGE=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/javascriptlanguage=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-Typecontent=text/html;charset=gb2312/>
- <title>UntitledDocument</title>
- </head>
- <body>
- <inputname=frmchangshangclass=InputTextid=frmchangshangstyle=width:250px;
- onBlur=DisSelect();onKeyUp=findNames();size=50maxlength=100>
- <spanclass=style1>提示:輸入關鍵字,程序自動從庫中匹配您
- 要找的記錄,如果不存在自行填寫
- </span>
- <divstyle=position:absolute;top:0;left:0;id=popup>
- <tableid=name_tablebgcolor=#FFFAFAborder=0cellspacing=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.0encoding=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模仿google suggest風格實現下拉菜單效果的代碼,希望對大家的學習有所幫助。