1 <!doctype html>
2 <html>
3 <style>
4 body {
5 margin-left: 0px;
6 margin-top: 0px;
7 margin-right: 0px;
8 margin-bottom: 0px;
9 }
10 .auto_hidden {
11 width:204px;border-top: 1px solid #333;
12 border-bottom: 1px solid #333;
13 border-left: 1px solid #333;
14 border-right: 1px solid #333;
15 position:absolute;
16 display:none;
17 }
18 .auto_show {
19 width:204px;
20 border-top: 1px solid #333;
21 border-bottom: 1px solid #333;
22 border-left: 1px solid #333;
23 border-right: 1px solid #333;
24 position:absolute;
25 z-index:9999; /* 设置对象的层叠顺序 */
26 display:block;
27 }
28 .auto_onmouseover{
29 color:#ffffff;
30 background-color:highlight;
31 width:100%;
32 }
33 .auto_onmouseout{
34 color:#000000;
35 width:100%;
36 background-color:#ffffff;
37 }
38 </style>
39 <script language="javascript">
40 <!--
41 var $ = function (id) {
42 return "string" == typeof id ? document.getElementById(id) : id;
43 }
44 var Bind = function(object, fun) {
45 return function() {
46 return fun.apply(object, arguments);
47 }
48 }
49 function AutoComplete(obj,autoObj,arr){
50 this.obj=$(obj); //输入框
51 this.autoObj=$(autoObj);//DIV的根节点
52 this.value_arr=arr; //不要包含重复值
53 this.index=-1; //当前选中的DIV的索引
54 this.search_value=""; //保存当前搜索的字符
55 }
56 AutoComplete.prototype={
57 //初始化DIV的位置
58 init: function(){
59 this.autoObj.style.left = this.obj.offsetLeft + "px";
60 this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
61 this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px
62 },
63 //删除自动完成需要的所有DIV
64 deleteDIV: function(){
65 while(this.autoObj.hasChildNodes()){
66 this.autoObj.removeChild(this.autoObj.firstChild);
67 }
68 this.autoObj.className="auto_hidden";
69 },
70 //设置值
71 setValue: function(_this){
72 return function(){
73 _this.obj.value=this.seq;
74 _this.autoObj.className="auto_hidden";
75 }
76 },
77 //模拟鼠标移动至DIV时，DIV高亮
78 autoOnmouseover: function(_this,_div_index){
79 return function(){
80 _this.index=_div_index;
81 var length = _this.autoObj.children.length;
82 for(var j=0;j<length;j++){
83 if(j!=_this.index ){
84 _this.autoObj.childNodes[j].className=‘auto_onmouseout‘;
85 }else{
86 _this.autoObj.childNodes[j].className=‘auto_onmouseover‘;
87 }
88 }
89 }
90 },
91 //更改classname
92 changeClassname: function(length){
93 for(var i=0;i<length;i++){
94 if(i!=this.index ){
95 this.autoObj.childNodes[i].className=‘auto_onmouseout‘;
96 }else{
97 this.autoObj.childNodes[i].className=‘auto_onmouseover‘;
98 this.obj.value=this.autoObj.childNodes[i].seq;
99 }
100 }
101 }
102 ,
103 //响应键盘
104 pressKey: function(event){
105 var length = this.autoObj.children.length;
106 //光标键"↓"
107 if(event.keyCode==40){
108 ++this.index;
109 if(this.index>length){
110 this.index=0;
111 }else if(this.index==length){
112 this.obj.value=this.search_value;
113 }
114 this.changeClassname(length);
115 }
116 //光标键"↑"
117 else if(event.keyCode==38){
118 this.index--;
119 if(this.index<-1){
120 this.index=length - 1;
121 }else if(this.index==-1){
122 this.obj.value=this.search_value;
123 }
124 this.changeClassname(length);
125 }
126 //回车键
127 else if(event.keyCode==13){
128 this.autoObj.className="auto_hidden";
129 this.index=-1;
130 }else{
131 this.index=-1;
132 }
133 },
134 //程序入口
135 start: function(event){
136 if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
137 this.init();
138 this.deleteDIV();
139 this.search_value=this.obj.value;
140 var valueArr=this.value_arr;
141 valueArr.sort();
142 if(this.obj.value.replace(/(^\s*)|(\s*$)/g,‘‘)==""){ return; }//值为空，退出
143 try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
144 catch (e){ return; }
145 var div_index=0;//记录创建的DIV的索引
146 for(var i=0;i<valueArr.length;i++){
147 if(reg.test(valueArr[i])){
148 var div = document.createElement("div");
149 div.className="auto_onmouseout";
150 div.seq=valueArr[i];
151 div.onclick=this.setValue(this);
152 div.onmouseover=this.autoOnmouseover(this,div_index);
153 div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
154 this.autoObj.appendChild(div);
155 this.autoObj.className="auto_show";
156 div_index++;
157 }
158 }
159 }
160 this.pressKey(event);
161 window.onresize=Bind(this,function(){this.init();});
162 }
163 }
164 //-->
165 </SCRIPT>
166 <body>
167 <h1 align="center">自动完成函数(Autocomplete Function)</h1>
168 <div align="center"><input type="text" style="width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)"></div>
169 <div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
170 <script>
171 var autoComplete=new AutoComplete(‘o‘,‘auto‘,[‘b0‘,‘b12‘,‘b22‘,‘b3‘,‘b4‘,‘b5‘,‘b6‘,‘b7‘,‘b8‘,‘b2‘,‘abd‘,‘ab‘,‘acd‘,‘accd‘,‘b1‘,‘cd‘,‘ccd‘,‘cbcv‘,‘cxf‘]);
172 </SCRIPT>
173 </body>
174 </html>
时间： 2024-11-08 22:16:05