ASP模仿google suggest風格實現下拉菜單效果

這篇文章主要介紹了ASP模仿google suggest風格實現下拉菜單效果，需要的朋友可以參考下

今天和大家一起利用ASP模仿實現google suggest風格的下拉菜單，直接上代碼

1.前台代碼：

1. <%@LANGUAGE=JAVASCRIPTCODEPAGE=936%>
2. <!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN
4. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
5. <htmlxmlns=http://www.w3.org/1999/xhtml>
6. <styletype=text/css>
7. <!--
8. .style1{color:#FF0000}
9. .mouseOut
10. {
11. font-size:12px;
12. background:#708090;
13. color:#FFFAFA;
14. }
16. .mouseOver
17. {
18. font-size:12px;
19. background:#FFFAFA;
20. color:#000000;
21. }
22. -->
23. </style>
24. <scripttype=text/javascriptlanguage=javascript>
25. varxmlHttp;
26. varcompleteDiv;
27. varinputField;
28. varnameTable;
29. varnameTableBody;
30. varflag=false;
32. functioncreateXMLHttpRequest(){
33. if(window.ActiveXObject){
34. xmlHttp=newActiveXObject(Microsoft.XMLHTTP);
35. }
36. elseif(window.XMLHttpRequest){
37. xmlHttp=newXMLHttpRequest();
38. }
39. }
41. functionsetflag(){
42. flag=true;
43. }
45. functionDisSelect()
46. {
47. if(flag==false)
48. document.getElementById(popup).style.display=none;
49. }
51. functioninitVars(){
52. inputField=document.getElementById(frmchangshang);
53. nameTable=document.getElementById(name_table);
54. completeDiv=document.getElementById(popup);
55. nameTableBody=document.getElementById(name_table_body);
56. document.getElementById(popup).style.display=block;
57. }
59. functionfindNames(){
60. initVars();
61. if(inputField.value.length>0)
62. {
63. createXMLHttpRequest();
64. varurl=search.asp?names=+inputField.value;
65. xmlHttp.open(GET,url,true);
66. xmlHttp.onreadystatechange=callback;
67. xmlHttp.send(null);
68. }
69. else
70. {
71. clearNames();
72. }
73. }
75. functioncallback(){
76. if(xmlHttp.readyState==4){
77. if(xmlHttp.status==200)
78. {
79. try
80. {
81. varname=xmlHttp.responseXML.getElementsByTagName(name)
83. [0].firstChild.data;
84. }
85. catch(e)
86. {
87. document.getElementById(popup).style.display=none;
88. clearNames();
89. }
90. setNames(xmlHttp.responseXML.getElementsByTagName(content));
91. }
92. elseif(xmlHttp.status==204)
93. {
94. clearNames();
95. }
96. }
97. }
99. functionsetNames(the_names){
100. clearNames();
101. varsize=the_names.length;
102. setOffsets();
103. varrow,cell,spans;
104. for(vari=0;i<size;i++){
105. //varnextNode=the_names[i].firstChild.data;
106. vare=the_names[i];
107. //取得子節點內容，重新裝載為數組
108. varnextNode=e.getElementsByTagName(name)[0].firstChild.data;
109. //創建tr，td，span元素
110. row =document.createElement(tr);
111. cell=document.createElement(td);
112. //spans=document.createElement(span);
113. //設置cell屬性
114. cell.onmouseout=function(){this.className='mouseOver';flag=false;};
115. cell.onmouseover=function(){this.className='mouseOut';flag=true;};
116. cell.setAttribute(bgcolor,#FFFAFA);
117. cell.setAttribute(border,0);
118. //cell.setAttribute(onmouseover,setflag());
119. cell.onclick=function(){populateName(this);};
120. //將nextNode添加到td
121. vartxtName=document.createTextNode(nextNode);
122. cell.appendChild(txtName);
123. //裝載隱藏數據到span元素
124. row.appendChild(cell);
125. nameTableBody.appendChild(row);
126. }
127. }
129. functionsetOffsets(){
130. varend=inputField.offsetWidth;
131. varleft=calculateOffsetLeft(inputField);
132. vartop=calculateOffsetTop(inputField)+inputField.offsetHeight;
134. completeDiv.style.border=black1pxsolid;
135. completeDiv.style.left=left+px;
136. completeDiv.style.top=top+px;
137. nameTable.style.width=400px;
138. }
140. functioncalculateOffsetLeft(field){
141. returncalculateOffset(field,offsetLeft);
142. }
144. functioncalculateOffsetTop(field){
145. returncalculateOffset(field,offsetTop);
146. }
148. functioncalculateOffset(field,attr){
149. varoffset=0;
150. while(field){
151. offset+=field[attr];
152. field=field.offsetParent;
153. }
154. returnoffset;
155. }
157. functionpopulateName(cell){
158. //填充數據到web頁面，cell---->td對象
159. inputField.value=cell.firstChild.nodeValue;
160. clearNames();
161. }
162. //清除列表數組
163. functionclearNames(){
164. varind=nameTableBody.childNodes.length;
165. for(vari=ind-1;i>=0;i--){
166. nameTableBody.removeChild(nameTableBody.childNodes[i]);
167. }
168. completeDiv.style.border=none;
169. }
170. </script>
171. <head>
172. <metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/>
173. <title>UntitledDocument</title>
174. </head>
176. <body>
177. <inputname=frmchangshangclass=InputTextid=frmchangshangstyle=width:250px;
179. onBlur=DisSelect();onKeyUp=findNames();size=50maxlength=100>
180. <spanclass=style1>提示：輸入關鍵字，程序自動從庫中匹配您
182. 要找的記錄，如果不存在自行填寫
183. </span>
184. <divstyle=position:absolute;top:0;left:0;id=popup>
185. <tableid=name_tablebgcolor=#FFFAFAborder=0cellspacing=0
187. cellpadding=0>
188. <tbodyid=name_table_body></tbody>
189. </table>
190. </div>
191. </body>
192. </html>

2.後台search.asp異步查詢數據頁面

把sql語句和要顯示的字段改為自己的數據庫相對應格式就可以了。

1. <!--#includevirtual=conn.asp-->
2. <%
3. keyword=request.QueryString(names)
4. sql=selectlgid,lgmcfromlgwherelgmclike'%&keyword&%'orderbylgiddesc
5. setrs=server.CreateObject(adodb.recordset)
6. rs.opensql,conn,1,1
7. Response.ContentType=text/xml
8. response.Write<?xmlversion=1.0encoding=GB2312?>
9. response.Write<response>
10. dowhilenotrs.eof
11. response.Write<content>
12. response.Write<name>&rs(lgmc)&</name>
13. 'response.Write<userid>&rs(userid)&</userid>
14. 'response.Write<startime>&rs(startime)&</startime>
15. 'response.Write<endtime>&rs(endtime)&</endtime>
16. response.Write</content>
17. rs.movenext
18. loop
19. response.Write</response>
20. rs.close
21. setrs=nothing
22. %>

以上就是ASP模仿google suggest風格實現下拉菜單效果的代碼，希望對大家的學習有所幫助。