动态生成文本提示下拉框

1. 基本思路是:
2. 通过文本框的位置来确定提示框的位置
3. 提示框用div来实现
4. 文本框第一次获得获得焦点时用ajax读取数据用数组保存
   
5. 通过对文本框添加onkeyup事件来刷新提示框的数据
   
6. 
   
7. /创建XMLHttpRequest对象///
8. var xmlHttp = false;
9. var nameVal = new Array();
10. if(window.ActiveXObject){
11.       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
12.   }
13. else if(window.XMLHttpRequest){
14.       xmlHttp = new XMLHttpRequest();
15.   }
16. else{ 
17.       xmlHttp = false;
18. }     
22. //为id为staion_key输入框绑定事件.
23. function addIndexStation(){
24. if(document.getElementById("station_key")) return;
25. var station = document.getElementById("station_key");
26.     station.onkeyup = function(){       
27.         showInfoBox(this,nameVal);
28.         if(nameVal.length == 0) getDateForS();
29.     }
30. }
34. ///自动提示框事件函数///
35. function showInfoBox(objct,ary){    //objct为输入框,ary为数据数组
36.     createInfoBox(objct);
37.     var divInfoBox = document.getElementById("divinfobox"); 
38.     divInfoBox.style.display = "none";
39.     var oldvalue = objct.value;
40.     var newvalue = "";   
41.     
42.     if(divInfoBox.style.display == "none") 
43.     if(oldvalue=="") return;
44.     for(var i=0;i<ary.length;i++){
45.         if(ary[i].indexOf(oldvalue)>=0)
46.         newvalue += ('<li>'+ary[i]+'</li>');
47.         
48.     }
49.     if(newvalue == "") return;  
50.     divInfoBox.innerHTML = "<ul>"+newvalue+"</ul>";
51.     divInfoBox.style.display = "block"; 
52.     
53. /添加鼠标移到提示框的事件处理/
54.         if(!document.getElementById("divinfobox"))return;
55.         var divInfoBox = document.getElementById("divinfobox");
56.         var ul = divInfoBox.firstChild;    
57.         var li_all = ul.childNodes;    
58.         for(var j=0;j<li_all.length;j++){
59.                 li_all[j].onmousemove = function(){
60.                               objct.value = this.firstChild.nodeValue;
61.                                 }
62.         }   
63. }
69. function getDateForS(){ 
70.      var queryString="key="+ '';               
71.      xmlHttp.open("POST",baseUrl+"start/getStations",true);
72.      xmlHttp.onreadystatechange = setStations;
73.     //make the server request
74.     xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
75.     xmlHttp.send(queryString);    
76.    //getdatetime=setTimeout("getDateForS(oldvalue)", 500);
77. }
82. function setStations(){
83.     if (xmlHttp.readyState == 4) 
84.   {
85.     // status of 200 indicates the transaction completed successfully
86.     if (xmlHttp.status == 200) 
87.     {
88.      var str= xmlHttp.responseText; 
89.      nameVal = str.split(',');    
90.     } 
91.     // a HTTP status different than 200 signals an error
92.     else 
93.     {
94.       alert("There was a problem accessing the server: " + xmlHttp.statusText);
95.     }
96.   }
97. }
102. 创建提示框
103. function createInfoBox(inputTxt){
104.             if(document.getElementById("divinfobox")) return;
105.             var pos = getElementPos(inputTxt);  
106.             var divInfoBox=document.createElement("div");           
107.             var width = inputTxt.style.width;
108.             divInfoBox.style.width = width;
109.             divInfoBox.setAttribute("id","divinfobox");         
110.             addClass(divInfoBox,"infobox_1");           
111.             //divInfoBox.style.height = "100px";            
112.             divInfoBox.style.position = "absolute";
113.             divInfoBox.style.top = pos.y + 18 + "px";
114.             divInfoBox.style.left = pos.x + "px";               
115.             divInfoBox.style.backgroundColor = "#ffffff";       
116.             if(!inputTxt.parentNode){ alert('没有父节点'); return;}      
117.             var inputTxtParNod=inputTxt.parentNode;         
118.             inputTxtParNod.insertBefore(divInfoBox,inputTxt); 
119. }
126. //获得元素对象位置//
127. function getElementPos(el) {
128.       var ua = navigator.userAgent.toLowerCase();
129.       var isOpera = (ua.indexOf('opera') != -1);
130.       var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
131.   
132.      if(el.parentNode === null || el.style.display == 'none')
133.        {
134.           return false;
135.       }
136.   
137.       var parent = null;
138.       var pos = [];
139.       var box;
140.       if(el.getBoundingClientRect) //IE
141.        {
142.           box = el.getBoundingClientRect();
143.           var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
144.           var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
145.            return {x:box.left + scrollLeft, y:box.top + scrollTop};
146.       }
147.       else if(document.getBoxObjectFor) // gecko
148.        {
149.           box = document.getBoxObjectFor(el);
150.           var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
151.           var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
152.           pos = [box.x - borderLeft, box.y - borderTop];
153.       }
154.       else // safari & opera
155.        {
156.           pos = [el.offsetLeft, el.offsetTop];
157.           parent = el.offsetParent;
158.           if (parent != el) 
159.            {
160.   
161.            while (parent) {
162.               pos[0] += parent.offsetLeft;
163.               pos[1] += parent.offsetTop;
164.               parent = parent.offsetParent;
165.           }
166.       }
167.       if (ua.indexOf('opera') != -1
168.       || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))
169.        {
170.           pos[0] -= document.body.offsetLeft;
171.           pos[1] -= document.body.offsetTop;
172.       }
173.       }
174.   
175.        if (el.parentNode) { parent = el.parentNode; }
176.        else { parent = null; }
177.       while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
178.        { // account for any scrolled ancestors
179.       pos[0] -= parent.scrollLeft;
180.       pos[1] -= parent.scrollTop;
181.        if (parent.parentNode) { parent = parent.parentNode; }
182.        else { parent = null; }
183.       }
184.        return {x:pos[0], y:pos[1]};
185.   }
187. /加类样式函数/
188.  function addClass(element,value) { 
189.   if (!element.className) { 
190.     element.className = value; 
191.   } else { 
192.     newClassName = element.className; 
193.     newClassName+= " "; 
194.     newClassName+= value; 
195.     element.className = newClassName; 
196.   } 
197. } 
200. /加载函数///
201. function addLoadEvent(func) 
202. {
203.   var oldonload = window.onload;
204.   if (typeof window.onload != 'function') 
205.   {
206.     window.onload = func;
207.   } 
208.   else 
209.   {
210.     window.onload = function() 
211.     {
212.       oldonload();
213.       func();
214.     }
215.   } 
216. }
219. addLoadEvent(addIndexStation);

样式表:

1. .infobox_1{
2.     border:#999999 1px solid;
3.     width:150px;
4.     height:auto;        
5.     }
7. .infobox_1 li{  
8.     width:100%;
9.     text-align:left;
10.     overflow:hidden;
11.     color:#000000;
12.     }
13. .infobox_1 li:hover {
14.     color:#000000;      
15.     background:#00CCFF; 
16.     }
18.     

初学js一定有很多不足之处,请多多指教!