This article mainly introduces ASP to imitate Google suggest style to achieve the drop-down menu effect. Friends who need it can refer to it
Today, I will use ASP to imitate the Google suggest style drop-down menu and directly upload the code
1. Foreground code:
- <%@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;
- variinputField;
- 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];
- //Get the child node content and reload it into an array
- varnextNode=e.getElementsByTagName(name)[0].firstChild.data;
- //Create tr, td, span elements
- row =document.createElement(tr);
- cell=document.createElement(td);
- //spans=document.createElement(span);
- //Set cell properties
- 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);};
- //Add nextNode to td
- vartxtName=document.createTextNode(nextNode);
- cell.appendChild(txtName);
- //Load hidden data to span element
- 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){
- //Fill data to web page, cell---->td object
- inputField.value=cell.firstChild.nodeValue;
- clearNames();
- }
- //Clear the list array
- 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> Tip: Enter keywords and the program will automatically match you from the library
- If the record is not present, fill in it yourself
- </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. Backend search.asp asynchronous query data page
Just change the SQL statement and the fields to be displayed to the corresponding format of your own database.
- <!--#includevirtual=conn.asp-->
- <%
- keyword=request.QueryString(names)
- sql=selectlgid,lgmcfromgwherelgmclike'%&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
- %>
The above is the code for ASP to imitate the Google suggest style to achieve the drop-down menu effect. I hope it will be helpful to everyone's learning.