功能我空间里有,可以去看,有格式代码,[url]http://iLinux.iteye.com/blog/620044[/url]
代码也给你拷过来:
1.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.
3.
4.Ajax Auto Complete
5.<br><br>
6..mouseOut {<br><br>
7. background: #708090;<br><br>
8. color: #FFFAFA;<br><br>
9.}<br><br>
10.<br><br>
11..mouseOver {<br><br>
12. background: #FFFAFA;<br><br>
13. color: #000000;<br><br>
14.}<br><br>
15.
16.
17.<br><br>
18.<br><br>
19. var xmlHttp;<br><br>
20.<br><br>
21. var completeDiv;<br><br>
22.<br><br>
23. var inputField;<br><br>
24.<br><br>
25. var nameTable;<br><br>
26.<br><br>
27. var nameTableBody;<br><br>
28.<br><br>
29.<br><br>
30.<br><br>
31. function createXMLHttpRequest() {<br><br>
32.<br><br>
33. if (window.ActiveXObject) {<br><br>
34.<br><br>
35. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br><br>
36.<br><br>
37. }<br><br>
38.<br><br>
39. else if (window.XMLHttpRequest) {<br><br>
40.<br><br>
41. xmlHttp = new XMLHttpRequest();<br><br>
42.<br><br>
43. }<br><br>
44.<br><br>
45. }<br><br>
46.<br><br>
47.<br><br>
48.<br><br>
49. function initVars() {<br><br>
50.<br><br>
51. inputField = document.getElementById("names");<br><br>
52.<br><br>
53. nameTable = document.getElementById("name_table");<br><br>
54.<br><br>
55. completeDiv = document.getElementById("popup");<br><br>
56.<br><br>
57. nameTableBody = document.getElementById("name_table_body");<br><br>
58.<br><br>
59. }<br><br>
60.<br><br>
61.<br><br>
62.<br><br>
63. function findNames() {<br><br>
64. initVars();<br><br>
65.<br><br>
66. var mails = ["@163.com","@sina.com","@gmail.com"];<br><br>
67. if (inputField.value.length > 0) {<br><br>
68. clearNames();<br><br>
69.<br><br>
70. var size = mails.length;<br><br>
71.<br><br>
72. setOffsets();<br><br>
73. var row, cell, txtNode;<br><br>
74. var dizhi = inputField.value;<br><br>
75.<br><br>
76. for (var i = 0; i < size; i++) {<br><br>
77. var nextNode = dizhi + mails[i];<br><br>
78.<br><br>
79. row = document.createElement("tr");<br><br>
80.<br><br>
81. cell = document.createElement("td");<br><br>
82.<br><br>
83.<br><br>
84.<br><br>
85. cell.onmouseout = function() {this.className='mouseOver';};<br><br>
86.<br><br>
87. cell.onmouseover = function() {this.className='mouseOut';};<br><br>
88.<br><br>
89. cell.setAttribute("bgcolor", "#FFFAFA");<br><br>
90.<br><br>
91. cell.setAttribute("border", "0");<br><br>
92.<br><br>
93. cell.onclick = function() { populateName(this); } ;<br><br>
94.<br><br>
95.<br><br>
96.<br><br>
97. txtNode = document.createTextNode(nextNode);<br><br>
98.<br><br>
99. cell.appendChild(txtNode);<br><br>
100.<br><br>
101. row.appendChild(cell);<br><br>
102.<br><br>
103. nameTableBody.appendChild(row);<br><br>
104.<br><br>
105. }<br><br>
106. return;<br><br>
107. }<br><br>
108.<br><br>
109.<br><br>
110.<br><br>
111. if (inputField.value.length > 0) {<br><br>
112.<br><br>
113. createXMLHttpRequest();<br><br>
114.<br><br>
115. var url = "AutoCompleteServlet?names=" + escape(inputField.value);<br><br>
116.<br><br>
117. xmlHttp.open("GET", url, true);<br><br>
118.<br><br>
119. xmlHttp.onreadystatechange = callback;<br><br>
120.<br><br>
121. xmlHttp.send(null);<br><br>
122.<br><br>
123. } else {<br><br>
124.<br><br>
125. clearNames();<br><br>
126.<br><br>
127. }<br><br>
128.<br><br>
129. }<br><br>
130.<br><br>
131.<br><br>
132.<br><br>
133. function callback() {<br><br>
134.<br><br>
135. if (xmlHttp.readyState == 4) {<br><br>
136.<br><br>
137. if (xmlHttp.status == 200) {<br><br>
138.<br><br>
139. var name =<br><br>
140.<br><br>
141. xmlHttp.responseXML<br><br>
142.<br><br>
143. .getElementsByTagName("name")[0].firstChild.data;<br><br>
144.<br><br>
145. setNames(xmlHttp.responseXML.getElementsByTagName("name"));<br><br>
146.<br><br>
147. } else if (xmlHttp.status == 204){<br><br>
148.<br><br>
149. clearNames();<br><br>
150.<br><br>
151. }<br><br>
152.<br><br>
153. }<br><br>
154.<br><br>
155. }<br><br>
156.<br><br>
157.<br><br>
158.<br><br>
159. function setNames(the_names) {<br><br>
160.<br><br>
161. clearNames();<br><br>
162.<br><br>
163. var size = the_names.length;<br><br>
164.<br><br>
165. setOffsets();<br><br>
166.<br><br>
167.<br><br>
168.<br><br>
169. var row, cell, txtNode;<br><br>
170.<br><br>
171. for (var i = 0; i < size; i++) {<br><br>
172.<br><br>
173. var nextNode = the_names[i].firstChild.data;<br><br>
174.<br><br>
175. row = document.createElement("tr");<br><br>
176.<br><br>
177. cell = document.createElement("td");<br><br>
178.<br><br>
179.<br><br>
180.<br><br>
181. cell.onmouseout = function() {this.className='mouseOver';};<br><br>
182.<br><br>
183. cell.onmouseover = function() {this.className='mouseOut';};<br><br>
184.<br><br>
185. cell.setAttribute("bgcolor", "#FFFAFA");<br><br>
186.<br><br>
187. cell.setAttribute("border", "0");<br><br>
188.<br><br>
189. cell.onclick = function() { populateName(this); } ;<br><br>
190.<br><br>
191.<br><br>
192.<br><br>
193. txtNode = document.createTextNode(nextNode);<br><br>
194.<br><br>
195. cell.appendChild(txtNode);<br><br>
196.<br><br>
197. row.appendChild(cell);<br><br>
198.<br><br>
199. nameTableBody.appendChild(row);<br><br>
200.<br><br>
201. }<br><br>
202.<br><br>
203. }<br><br>
204.<br><br>
205.<br><br>
206.<br><br>
207. function setOffsets() {<br><br>
208.<br><br>
209. var end = inputField.offsetWidth;<br><br>
210.<br><br>
211. var left = calculateOffsetLeft(inputField);<br><br>
212.<br><br>
213. var top = calculateOffsetTop(inputField) + inputField.offsetHeight;<br><br>
214.<br><br>
215.<br><br>
216.<br><br>
217. completeDiv.style.border = "black 1px solid";<br><br>
218.<br><br>
219. completeDiv.style.left = left + "px";<br><br>
220.<br><br>
221. completeDiv.style.top = top + "px";<br><br>
222.<br><br>
223. nameTable.style.width = end + "px";<br><br>
224.<br><br>
225. }<br><br>
226.<br><br>
227.<br><br>
228.<br><br>
229. function calculateOffsetLeft(field) {<br><br>
230.<br><br>
231. return calculateOffset(field, "offsetLeft");<br><br>
232.<br><br>
233. }<br><br>
234.<br><br>
235.<br><br>
236.<br><br>
237. function calculateOffsetTop(field) {<br><br>
238.<br><br>
239. return calculateOffset(field, "offsetTop");<br><br>
240.<br><br>
241. }<br><br>
242.<br><br>
243.<br><br>
244.<br><br>
245. function calculateOffset(field, attr) {<br><br>
246.<br><br>
247. var offset = 0;<br><br>
248.<br><br>
249. while(field) {<br><br>
250.<br><br>
251. offset += field[attr];<br><br>
252.<br><br>
253. fieldfield = field.offsetParent;<br><br>
254.<br><br>
255. }<br><br>
256.<br><br>
257. return offset;<br><br>
258.<br><br>
259. }<br><br>
260.<br><br>
261.<br><br>
262.<br><br>
263. function populateName(cell) {<br><br>
264.<br><br>
265. inputField.value = cell.firstChild.nodeValue;<br><br>
266.<br><br>
267. clearNames();<br><br>
268.<br><br>
269. }<br><br>
270.<br><br>
271.<br><br>
272.<br><br>
273. function clearNames() {<br><br>
274.<br><br>
275. var ind = nameTableBody.childNodes.length;<br><br>
276.<br><br>
277. for (var i = ind - 1; i >= 0 ; i--) {<br><br>
278.<br><br>
279. nameTableBody.removeChild(nameTableBody.childNodes[i]);<br><br>
280.<br><br>
281. }<br><br>
282.<br><br>
283. completeDiv.style.border = "none";<br><br>
284.<br><br>
285. }<br><br>
286.<br><br>
287.<br><br>
288.<br><br>
289.
290.
291.
292.
293.
294.
295.
showAllEmailFixes.html
296.
297.Names:
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.