1 <script language="javascript">
2 var intIndex=0;arrList = new Array();
3 arrList[intIndex++] = "www.flyso.net";
4 arrList[intIndex++] = "flyso@163.com";
5 arrList[intIndex++] = "b22dsafsdf";
6 arrList[intIndex++] = "c333asdfsadf";
7 arrList[intIndex++] = "4444dsafasdf";
8 arrList[intIndex++] = "dddsfddsafdsaf";
9 arrList[intIndex++] = "121213dsafsdaf";
10 arrList[intIndex++] = "43213asdfadsf";
11 arrList[intIndex++] = "www.flyso.net";
12 arrList[intIndex++] = "a213";
13 arrList[intIndex++] = "323313";
14 arrList[intIndex++] = "3213";
15 arrList[intIndex++] = "32213";
16 arrList[intIndex++] = "dsfsdddd";
17 arrList[intIndex++] = "ds11dfsfd";
18 arrList[intIndex++] = "ffdafd";
19 arrList[intIndex++] = "afdfd";
20 arrList[intIndex++] = "afd";
21 arrList[intIndex++] = "baffad";
22 arrList[intIndex++] = "2fda2fd";
23 arrList[intIndex++] = "dasd";
24
25 function test() {
26 init();
27 smanPromptList(arrList,"aspx")
28 smanPromptList(arrList,"aspx2")
29 smanPromptList(arrList,"inputer")
30 }
31 function init() {
32 if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
33 arrList.sort( function(a, b) {
34 if(a.length>b.length)return 1;
35 else if(a.length==b.length)return a.localeCompare(b);
36 else return -1;
37 }
38 );
39 }
40
41
42 function smanPromptList(arrList,objInputId){
43 var objouter=document.getElementById("__smanDisp") //显示的DIV对象
44 var objInput = document.getElementById(objInputId); //文本框对象
45 var selectedIndex=-1;
46 var intTmp; //循环用的:)
47
48 if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
49 //文本框失去焦点
50 objInput.onblur=function(){
51 objouter.style.display='none';
52 }
53 //文本框按键抬起
54 objInput.onkeyup=checkKeyCode;
55 //文本框得到焦点
56 objInput.onfocus=checkAndShow;
57 function checkKeyCode(){
58 var ie = (document.all)? true:false
59 if (ie){
60 var keyCode=event.keyCode
61 if (keyCode==40||keyCode==38){ //下上
62 var isUp=false
63 if(keyCode==40) isUp=true ;
64 chageSelection(isUp)
65 }else if (keyCode==13){//回车
66 outSelection(selectedIndex);
67 }else{
68 checkAndShow()
69 }
70 }else{
71 checkAndShow()
72 }
73 divPosition()
74 }
75
76 function checkAndShow(){
77 var strInput = objInput.value
78 if (strInput!=""){
79 divPosition();
80 selectedIndex=-1;
81 objouter.innerHTML ="";
82 for (intTmp=0;intTmp<arrList.length;intTmp++){
83
84 //这个循环控制如果是匹配的就模糊显示出来，如果要全部显示则去掉这个if即可全部显示！
85 if (arrList[intTmp].substr(0, strInput.length).toUpperCase()==strInput.toUpperCase()){
86 addOption(arrList[intTmp]);
87 }
88 }
89 objouter.style.display='';
90 }else{
91 objouter.style.display='none';
92 }
93 function addOption(value){
94 objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>"
95 }
96 }
97 function chageSelection(isUp){
98 if (objouter.style.display=='none'){
99 objouter.style.display='';
100 }else{
101 if (isUp)
102 selectedIndex++
103 else
104 selectedIndex--
105 }
106 var maxIndex = objouter.children.length-1;
107 if (selectedIndex<0){selectedIndex=0}
108 if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
109 for (intTmp=0;intTmp<=maxIndex;intTmp++){
110
111 if (intTmp==selectedIndex){
112 objouter.children[intTmp].className="sman_selectedStyle";
113 }else{
114 objouter.children[intTmp].className="";
115 }
116 }
117 }
118 function outSelection(Index){
119 objInput.value = objouter.children[Index].innerText;
120 objouter.style.display='none';
121 }
122 function divPosition(){
123 objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
124 objouter.style.left =getAbsoluteLeft(objInput);
125 objouter.style.width=getAbsoluteWidth(objInput)
126 }
127 }
128 document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
129 document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
130 function getAbsoluteHeight(ob){
131 return ob.offsetHeight
132 }
133 function getAbsoluteWidth(ob){
134 return ob.offsetWidth
135 }
136 function getAbsoluteLeft(ob){
137 var mendingLeft = ob .offsetLeft;
138
139 mendingLeft += ob .offsetParent.offsetLeft;
140 mendingOb = ob.offsetParent;
141 return mendingLeft ;
142 }
143 function getAbsoluteTop(ob){
144 var mendingTop = ob.offsetTop;
145 mendingTop += ob .offsetParent.offsetTop;
146 ob = ob .offsetParent;
147 return mendingTop ;
148 }
149 </script>
150 <body onload="test()">
151 </body>
152 请输入内容：
153 <input type="text" id="inputer"> 如 a
154 <br>
155 <font color="red">
156 一个文本框的下拉提示
157 </font>
158
159 多个文本框的下拉提示<br>
160 <input type="text" id="aspx"><br>
161
162 <input type="text" id="aspx2"><br>