ASP+AJAX做类似google的搜索提示

[xhtml]  view plain  copy

1. 主要要文件有:  
2.   
3. Index.html 实现功能,一个文本框,输入内容并实现提示  
4.   
5. search.asp 查询功能,让文本框输入的内容在<a href="http://lib.csdn.net/base/mysql" class='replace_word' title="MySQL知识库" target='_blank' style='color:#df3434; font-weight:bold;'>数据库</a>中查询,然后返回给客户端  
6.   
7. conn.asp 数据库连接功能,实现与数据库相连 xmlhttp.js AJAX 核心部分,用来把客户端的数据传给服务端,再把服务端的数据返还给客户端.  
8.   
9. style.css 样式文件,主要是对google提示框查询到的内容进行样式化处理  
10.   
11. 先看第一个文件style.css  
12.   
13.   
14. @charset "utf-8";   
15. /* CSS Document */   
16.   
17. body   
18. {   
19. font-size:12px;   
20. font-family:Arial, Helvetica, sans-serif;   
21. }   
22.   
23. #search_suggest   
24. {   
25. position:absolute;   
26. background:#FFFFFF;   
27. text-align:left;   
28. border:1px #000000 solid;   
29. }   
30.   
31. .suggest_link_over   
32. {   
33. background-color:#e8f2fe;   
34. padding:2px 6px;   
35. }   
36. .suggest_link   
37. {   
38. padding:2px 6px;   
39. background-color:#FFFFFF;   
40. }   
41. .none   
42. {   
43. display:none;   
44. }   
45.   
46. 第二个文件: xmlhttp.js   
47.   
48. // <a href="http://lib.csdn.net/base/javascript" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a> Documentrt   
49. var xmlHttp = createXmlHttpRequest();   
50. function createXmlHttpRequest()   
51. {   
52. var xmlhttp = null;   
53. try   
54. {   
55. xmlhttp = XMLHttpRequest();   
56. }   
57. catch(e1)   
58. {   
59. try   
60. {   
61. xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");   
62. }   
63. catch(e2)   
64. {   
65. try   
66. {   
67. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   
68. }   
69. catch(e3)   
70. {   
71. xmlhttp = false;   
72. alert("创建失败!");   
73. }   
74. }   
75. }   
76. return xmlhttp;   
77. }   
78.   
79. function change_key()   
80. {   
81. if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)   
82. {   
83. var str = document.getElementById("txt_key").value;   
84.   
85. xmlHttp.open("get","search.asp?key=" + str ,true);   
86. xmlHttp.onreadystatechange = handSearchRequest;   
87. xmlHttp.send(null);   
88. }   
89. }   
90.   
91. function handSearchRequest()   
92. {   
93. if (xmlHttp.readyState == 4)   
94. {   
95. var div = document.getElementById("search_suggest");   
96. div.innerHTML = "";   
97. var str = xmlHttp.responseText.split("|");   
98.   
99. for (var i=0; i<str.length; i++)   
100. {   
101. var suggest = ’<div onmouseover="javascript：suggestOver(this);" ’;   
102. suggest += ’onmouseout="javascript：suggestOut(this);" ’;   
103. suggest += ’onclick="javascript：setSearch(this.innerHTML);" ’;   
104. suggest += ’class="suggest_link">’ + str[i] + ’</div>’;   
105. div.innerHTML += suggest;   
106. }   
107. }   
108. }   
109.   
110. function setSearch(div_value)   
111. {   
112. document.getElementById("txt_key").value = div_value;   
113. document.getElementById("search_suggest").className = ’none’;   
114. }   
115. function suggestOver(div_value)   
116. {   
117. div_value.className = ’suggest_link_over’;   
118. }   
119.   
120. function suggestOut(div_value)   
121. {   
122. div_value.className = ’suggest_link’;   
123. }   
124.   
125. 第三个文件:conn.asp  
126.   
127. <%   
128. set conn = Server.CreateObject("Adodb.Connection")   
129. connStr = "Provider=SQLOLEDB;Server=./SQLEXPRESS;UID=sa;PWD=sa;Initial catalog=test;"   
130. conn.ConnectionString = connStr   
131. conn.open   
132. %>   
133.   
134. 第四个文件:search.asp  
135.   
136. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>   
137. <!-- #include file="conn.asp" -->   
138. <%key = request.QueryString("key")   
139.   
140. if (key <> "") then   
141. key = replace(key,"/","")   
142. key = replace(key,"’","")   
143. key = replace(key,"or","")   
144. sel_sql = "select [key] from [key] where [key] like ’" & key & "%’"   
145. dim keyword   
146. keyword = ""   
147.   
148. set rs = conn.execute (sel_sql)   
149. do while not rs.eof   
150. keyword = keyword & rs(0) & "|"   
151. rs.movenext   
152. loop   
153.   
154. response.Write(keyword)   
155. end if   
156. %>   
157.   
158. 最后一个结果文件:index.html   
159.   
160. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
161. <html xmlns="http://www.w3.org/1999/xhtml">   
162. <head>   
163. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
164. <title>google提示 </title>   
165. <mce:script src="xmlhttp.js" mce_src="xmlhttp.js" ></mce:script>   
166. <link rel="stylesheet" type="text/css" href="style.css" mce_href="style.css">   
167. </head>   
168. <body>   
169. <form id="form1" name="form1" method="post" action="">   
170. <input name="txt_key" type="text" id="textarea" autocomplete="off" onkeyup="change_key()"/><br/>   
171. <div id="search_suggest" ></div>   
172. </form>   
173. </body>   
174. </html>