AJAX基础教程－9 AutoComplete

java 代码

1. package ajax.foundations_of_ajax;   
2.   
3. import java.io.IOException;   
4. import java.io.PrintWriter;   
5. import java.util.ArrayList;   
6. import java.util.Iterator;   
7. import java.util.List;   
8.   
9. import javax.servlet.ServletConfig;   
10. import javax.servlet.ServletException;   
11. import javax.servlet.http.HttpServlet;   
12. import javax.servlet.http.HttpServletRequest;   
13. import javax.servlet.http.HttpServletResponse;   
14.   
15. public class AutoCompleteServlet extends HttpServlet {   
16.     private List names = new ArrayList();   
17.   
18.     public void init(ServletConfig config) throws ServletException {   
19.         names.add("Abe");   
20.         names.add("Abel");   
21.         names.add("Abigail");   
22.         names.add("Abner");   
23.         names.add("Abraham");   
24.         names.add("Marcus");   
25.         names.add("Marcy");   
26.         names.add("Marge");   
27.         names.add("Marie");   
28.     }   
29.   
30.     protected void doGet(HttpServletRequest request,   
31.             HttpServletResponse response) throws ServletException, IOException {   
32.         String prefix = request.getParameter("names");   
33.         response.setCharacterEncoding("UTF-8");   
34.         NameService service = NameService.getInstance(names);   
35.         List matching = service.findNames(prefix);   
36.         if (matching.size() > 0) {   
37.             PrintWriter out = response.getWriter();   
38.             response.setContentType("text/xml");   
39.             response.setHeader("Cache-Control", "no-cache");   
40.             out.println("<response>");   
41.             Iterator iter = matching.iterator();   
42.             while (iter.hasNext()) {   
43.                 String name = (String) iter.next();   
44.                 out.println("<name>" + name + "</name>");   
45.             }   
46.             out.println("</response>");   
47.             matching = null;   
48.             service = null;   
49.             out.close();   
50.         } else {   
51.             response.setStatus(HttpServletResponse.SC_NO_CONTENT);   
52.         }   
53.     }   
54.   
55. }   

js 代码

1. <style type="text/css">   
2. .mouseOut {   
3. background: #708090;   
4. color: #FFFAFA;   
5. }   
6. .mouseOver {   
7. background: #FFFAFA;   
8. color: #000000;   
9. }   
10. </style>   
11. <script type="text/javascript">   
12. var xmlHttp;   
13. var completeDiv;   
14. var inputField;   
15. var nameTable;   
16. var nameTableBody;   
17.     //创建xmlHttp对象   
18.     function createXMLHttpRequest() {   
19.         if (window.ActiveXObject) {   
20.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
21.         }   
22.         else if (window.XMLHttpRequest) {   
23.         xmlHttp = new XMLHttpRequest();   
24.         }   
25.     }   
26.     //初始化变量   
27.     function initVars() {   
28.         inputField = document.getElementById("names");   
29.         nameTable = document.getElementById("name_table");   
30.         completeDiv = document.getElementById("popup");   
31.         nameTableBody = document.getElementById("name_table_body");   
32.     }   
33.        
34.     //查找姓名   
35.     function findNames() {   
36.         initVars();   
37.         if (inputField.value.length > 0) {   
38.             createXMLHttpRequest();   
39.             var url = "AutoComplete?names=" + escape(inputField.value);   
40.             xmlHttp.open("GET", url, true);   
41.             xmlHttp.onreadystatechange = callback;   
42.             xmlHttp.send(null);   
43.         } else {   
44.             clearNames();   
45.         }   
46.     }   
47.        
48.        
49.     function callback() {   
50.         if (xmlHttp.readyState == 4) {   
51.             if (xmlHttp.status == 200) {   
52.             var name =   
53.             xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;   
54.             setNames(xmlHttp.responseXML.getElementsByTagName("name"));   
55.             } else if (xmlHttp.status == 204){   
56.             clearNames();   
57.             }   
58.         }   
59.     }   
60.        
61.        
62.     function setNames(the_names) {   
63.         clearNames();   
64.         var size = the_names.length;   
65.         setOffsets();   
66.         var row, cell, txtNode;   
67.         for (var i = 0; i < size; i++) {   
68.             var nextNode = the_names[i].firstChild.data;   
69.             row = document.createElement("tr");   
70.             cell = document.createElement("td");   
71.             cell.onmouseout = function() {this.className='mouseOver';};   
72.             cell.onmouseover = function() {this.className='mouseOut';};   
73.             cell.setAttribute("bgcolor", "#FFFAFA");   
74.             cell.setAttribute("border", "0");   
75.             cell.onclick = function() { populateName(this); } ;   
76.             txtNode = document.createTextNode(nextNode);   
77.             cell.appendChild(txtNode);   
78.             row.appendChild(cell);   
79.             nameTableBody.appendChild(row);   
80.         }   
81.     }   
82.        
83.   
84.     function setOffsets() {   
85.         var end = inputField.offsetWidth;   
86.         var left = calculateOffsetLeft(inputField);   
87.         var top = calculateOffsetTop(inputField) + inputField.offsetHeight;   
88.         completeDiv.style.border = "black 1px solid";   
89.         completeDiv.style.left = left + "px";   
90.         completeDiv.style.top = top + "px";   
91.         nameTable.style.width = end + "px";   
92.     }   
93.        
94.     function calculateOffsetLeft(field) {   
95.         return calculateOffset(field, "offsetLeft");   
96.     }   
97.        
98.     function calculateOffsetTop(field) {   
99.         return calculateOffset(field, "offsetTop");   
100.     }   
101.        
102.     function calculateOffset(field, attr) {   
103.         var offset = 0;   
104.         while(field) {   
105.             offset += field[attr];   
106.             field = field.offsetParent;   
107.         }   
108.         return offset;   
109.     }   
110.        
111.        
112.     function populateName(cell) {   
113.         inputField.value = cell.firstChild.nodeValue;   
114.         clearNames();   
115.     }   
116.        
117.     function clearNames() {   
118.         var ind = nameTableBody.childNodes.length;   
119.         for (var i = ind - 1; i >= 0 ; i--) {   
120.         nameTableBody.removeChild(nameTableBody.childNodes[i]);   
121.         }   
122.         completeDiv.style.border = "none";   
123.     }   
124. </script>