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. }
15. 　
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;
31. 　
32. 　functioncreateXMLHttpRequest(){
33. 　　　if(window.ActiveXObject){
34. 　　　　　xmlHttp=newActiveXObject(Microsoft.XMLHTTP);
35. 　　　}
36. 　　　elseif(window.XMLHttpRequest){
37. 　　　　　xmlHttp=newXMLHttpRequest();　　　　　　　　
38. 　　　}
39. 　}
40. 　
41. 　functionsetflag(){
42. 　　　flag=true;
43. 　}
44. 　
45. 　functionDisSelect()
46. 　{
47. 　　　if(flag==false)
48. 　　　document.getElementById(popup).style.display=none;
49. 　}
50. 　
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. 　}
58. 　
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. 　}
74. 　
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. 　}
98. 　
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. 　}
128. 　
129. 　functionsetOffsets(){
130. 　　　varend=inputField.offsetWidth;
131. 　　　varleft=calculateOffsetLeft(inputField);
132. 　　　vartop=calculateOffsetTop(inputField)+inputField.offsetHeight;
133. 　
134. 　　　completeDiv.style.border=black1pxsolid;
135. 　　　completeDiv.style.left=left+px;
136. 　　　completeDiv.style.top=top+px;
137. 　　　nameTable.style.width=400px;
138. 　}
139. 　
140. 　functioncalculateOffsetLeft(field){
141. 　　returncalculateOffset(field,offsetLeft);
142. 　}
143. 　
144. 　functioncalculateOffsetTop(field){
145. 　　returncalculateOffset(field,offsetTop);
146. 　}
147. 　
148. 　functioncalculateOffset(field,attr){
149. 　　varoffset=0;
150. 　　while(field){
151. 　　　offset+=field[attr];
152. 　　　field=field.offsetParent;
153. 　　}
154. 　　returnoffset;
155. 　}
156. 　
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>
175. 　
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风格实现下拉菜单效果的代码，希望对大家的学习有所帮助。