自己实现的auto complete

lostyue

1. var xmlHttp;
   
2.     var popupdiv;
   
3.     var nameTable;
   
4.     var nameTableBody;
   
5.     var inputfield;
   
6.     var otherfield;
   
7. 
   
8.     function myinitialization(){
   
9.         if(!popupdiv){
   
10.             popupdiv = document.createElement("DIV");
    
11.             nameTable = document.createElement("TABLE");
    
12.             nameTableBody = document.createElement("TBODY");
    
13.             
    
14.             nameTable.appendChild(nameTableBody);
    
15.             popupdiv.appendChild(nameTable);
    
16.             document.body.appendChild(popupdiv);
    
17.         }
    
18.     }
    
19. 
    
20.     function setPosition(inputfield){
    
21.         if(popupdiv){
    
22.             //position
    
23. 
    
24.             var end = inputfield.offsetWidth;
    
25.      var left = calculateOffsetLeft(inputfield);
    
26.      var top = calculateOffsetTop(inputfield) + inputfield.offsetHeight;
    
27. 
    
28.      popupdiv.style.display = "block";
    
29.      popupdiv.style.border = "black 1px solid";
    
30.      popupdiv.style.left = left + "px";
    
31.      popupdiv.style.top = top + "px";
    
32.             
    
33.             popupdiv.style.width = "300px";
    
34.             popupdiv.style.height = "200px";
    
35.             popupdiv.style.overflowX = "hidden";
    
36.             popupdiv.style.overflowY = "auto";
    
37.             popupdiv.style.position = "absolute";
    
38.             popupdiv.style.backgroundColor = "#FFFAFA";
    
39. 
    
40.             nameTable.style.width = "100%";
    
41.             }
    
42.         }
    
43. 
    
44. /*    function sendRequest(){
    
45.         inputfield = document.getElementById("inputname");
    
46.         myinitialization();
    
47.         
    
48.         if(inputfield.value.length > 0){
    
49.             xmlHttp = new XMLHttpRequest();
    
50.             xmlHttp.onreadystatechange = handleStateChange;
    
51.             var queryString = "home?inputname=" + escape(inputfield.value);
    
52. 
    
53.             xmlHttp.open("POST", queryString, true);
    
54.             xmlHttp.send();
    
55.         }else{
    
56.             clearNames();
    
57.             }
    
58.         } */
    
59. 
    
60. /*    function handleStateChange() {
    
61.         if(xmlHttp.readyState == 4) {
    
62.             if(xmlHttp.status == 200) {
    
63.                 //nameTable.focus();
    
64.                 setNames(xmlHttp.respon***ML.getElementsByTagName("emsuser"), inputfield);
    
65.                 }else if (xmlHttp.status == 204){
    
66.                     clearNames();
    
67.                 }
    
68.             }
    
69.     }*/
    
70.     
    
71.         function handleStateChange() {
    
72.             if(xmlHttp.readyState == 4) {
    
73.                 if(xmlHttp.status == 200) {
    
74.                     //nameTable.focus();
    
75. 
    
76.                     //var inputfield = document.getElementById("associateId");
    
77. 
    
78.                     //var otherfield = document.getElementById("associateName");
    
79. 
    
80.                     var myusers = xmlHttp.respon***ML.getElementsByTagName("emsuser");
    
81.                     if(myusers.length > 0){
    
82.                         setNames(myusers, inputfield, otherfield);
    
83.                     }
    
84.                     else{
    
85.                         clearNames();
    
86.                     }
    
87.                     }
    
88.                 }
    
89.         }
    
90. 
    
91.     function setNames(the_names, inputfield, otherfield) {
    
92.         clearNames();
    
93.         var size = the_names.length;
    
94.         //setOffsets();
    
95. 
    
96.         setPosition(inputfield);
    
97.         var row, cell, txtNode;
    
98.         for (var i = 0; i < size; i++) {
    
99.             var empname = the_names[i].getElementsByTagName("empname");
    
100.             var empid = the_names[i].getElementsByTagName("empid");
     
101.             
     
102.              var nextNode = empname[0].firstChild.data + "(" + empid[0].firstChild.data + ")";
     
103.              row = document.createElement("tr");
     
104.              cell = document.createElement("td");
     
105. 
     
106.              row.style.cursor = "pointer";
     
107.              //fuck css
     
108. 
     
109.              cell.className = "mytd";
     
110. 
     
111.              cell.onmouseout = function() {this.className='mouseOver';};
     
112.              cell.onmouseover = function() {this.className='mouseOut';};
     
113. 
     
114.              cell.setAttribute("bgcolor", "#FFFAFA");
     
115.              cell.setAttribute("border", "0");
     
116.                             
     
117.              cell.onclick = function() { populateName(this, inputfield, otherfield); } ;
     
118.              txtNode = document.createTextNode(nextNode);
     
119.                              
     
120.              cell.appendChild(txtNode);
     
121.              row.appendChild(cell);
     
122.              nameTableBody.appendChild(row);
     
123.              }
     
124.         }
     
125. 
     
126.     function calculateOffsetLeft(field) {
     
127.         return calculateOffset(field, "offsetLeft");
     
128.         }
     
129. 
     
130.     function calculateOffsetTop(field) {
     
131.         return calculateOffset(field, "offsetTop");
     
132.         }
     
133. 
     
134.     function calculateOffset(field, attr) {
     
135.         var offset = 0;
     
136.         while(field) {
     
137.             offset += field[attr];
     
138.             field = field.offsetParent;
     
139.             }
     
140.         return offset;
     
141.        }
     
142. 
     
143.     function populateName(cell, inputfield, otherfield) {
     
144.         var selectedvalue = cell.firstChild.nodeValue;
     
145.         if(inputfield.id == "ajaxwon"){
     
146.             otherfield.value = selectedvalue.substring(0, selectedvalue.length - 9);
     
147.             inputfield.value = selectedvalue.substring(selectedvalue.length - 8, selectedvalue.length -1);
     
148.         }else{
     
149.             inputfield.value = selectedvalue.substring(0, selectedvalue.length - 8);
     
150.             otherfield.value = selectedvalue.substring(selectedvalue.length - 7, selectedvalue.length -1);
     
151.         }
     
152.         clearNames();
     
153.     }
     
154. 
     
155.     function clearNames() {
     
156.         var ind = nameTableBody.childNodes.length;
     
157.         for (var i = ind - 1; i >= 0 ; i--) {
     
158.             nameTableBody.removeChild(nameTableBody.childNodes[i]); }
     
159.         popupdiv.style.display = "none";
     
160.         }

 

1. function rrsendRequest(){
   
2.         inputfield = document.getElementById("ajaxempName");
   
3.         otherfield = document.getElementById("empNo");
   
4.         
   
5.         myinitialization();
   
6.         if(inputfield.value.length > 0){
   
7.             xmlHttp = new XMLHttpRequest();
   
8.             xmlHttp.onreadystatechange = handleStateChange;
   
9.             var queryString = "<%=base %>/AjaxSearchAction.do?inputname=" + escape(inputfield.value);
   
10. 
    
11.             xmlHttp.open("POST", queryString, true);
    
12.             xmlHttp.send();
    
13.         }else{
    
14.             clearNames();
    
15.             }
    
16.         }