具有自动完成功能的TextBox控件

作者：herobeast
时间：2007-7-18
/Files/HeroBeast/autocompletetextboxcontrol.rar

我想大家在用163邮箱给朋友写信的时候，已经感受过“自动完成”功能了吧！

下面是我刚做一个类似于那样的控件.如下图：
JS
1 // JScript 文件
2
3 var InputID = ""; //输入框的ID
4 var DivFormat = false; //div是否有样式
5 var Items = new Array();//备选项
6
7 var backgroudcolor = "#ffffff";
8 var selbackgroudcolor = "blue";
9
10 var currentIndex = -1;
11
12
13
14 function AutoComplete(txtboxid,item)
15 {
16 InputID = txtboxid;
17 Items = item.split(',');
18 var obj = document.getElementById(InputID);
19 var qtxt = obj.value;
20 //生成一个div
21 CreateDiv(obj);
22 //生成查询值
23 QueryValue(qtxt,obj);
24
25 }
26
27 function QueryValue(value,tb)
28 {
29 var div = document.getElementById("HBAutoCompleteBoxDiv");
30 if(value != ""&&value!=null)
31 {
32
33 div.innerHTML = "";
34
35 for(i=0;i<Items.length;i++)
36 {
37 var item = Items[i];
38
39 var index = item.indexOf(value);
40
41 if(index == 0)
42 {
43 div.innerHTML += "<div onclick='SelectItem(this);' onmouseout='OnMouseOut(this);' onmouseover='OnMouseOver(this);'>"+item+"</div>"
44 }
45 }
46
47 if(div.innerHTML!=""&&div.innerHTML!=null)
48 {
49 div.style.visibility = "visible";
50 }
51 else
52 {
53 div.style.visibility = "hidden";
54 }
55 if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 39 || event.keyCode == 37)
56 {
57 //选择当前项
58 selItemByKey();
59
60 }
61 }
62 else
63 {
64 div.style.visibility = "hidden";
65 }
66
67 }
68 function selItemByKey()
69 {
70 var div = document.getElementById("HBAutoCompleteBoxDiv");
71 var txt = document.getElementById(InputID);
72 var subdiv = null;
73 if(!div)
74 {
75 return;
76 }
77 var len = div.childNodes.length;
78 //向上
79 if (event.keyCode == 38)
80 {
81
82 if(currentIndex == -1)
83 {
84 currentIndex= len-1;
85
86 }
87 else
88 {
89 currentIndex--;
90 }
91 if(currentIndex!=-1)
92 {
93 subdiv = div.childNodes[currentIndex];
94 OnMouseOver(subdiv);
95 }
96 }
97 //向下
98 if (event.keyCode == 40)
99 {
100
101 if(currentIndex == -1)
102 {
103 currentIndex= 0;
104
105 }
106 else
107 {
108 if(currentIndex<len)
109 {
110 currentIndex++;
111 }
112 else
113 {
114 currentIndex=-1;
115 }
116 }
117 if(currentIndex!=-1&¤tIndex<len)
118 {
119 subdiv = div.childNodes[currentIndex];
120 OnMouseOver(subdiv);
121 }
122 }
123 if (event.keyCode == 39 || event.keyCode == 37)
124 {
125 subdiv = div.childNodes[currentIndex];
126
127 txt.value = subdiv.innerHTML;
128 div.style.visibility = "hidden";
129 div.innerHTML = "";
130 currentIndex=-1;
131 subdiv.click();
132 }
133
134
135 }
136 function OnMouseOut(obj)
137 {
138 obj.style.color = "black";
139 obj.style.backgroundColor = backgroudcolor;
140 obj.style.width = "100%";
141 obj.style.cursor = "default";
142 }
143 function OnMouseOver(obj)
144 {
145
146 obj.style.color = backgroudcolor;
147 obj.style.backgroundColor = selbackgroudcolor;
148 obj.style.width = "100%";
149 obj.style.cursor = "default";
150 }
151 function SelectItem(obj)
152 {
153
154 var div = document.getElementById("HBAutoCompleteBoxDiv");
155 div.style.visibility = "hidden";
156 var tbox = document.getElementById(InputID);
157
158 tbox.value = obj.innerHTML;
159
160 }
161 function CreateDiv(obj)
162 {
163 if(!document.getElementById("HBAutoCompleteBoxDiv"))
164 {
165
166 //如果页面中没有div则创建
167 var newNode = document.createElement("div");
168 newNode.setAttribute("id", "HBAutoCompleteBoxDiv");
169 document.body.appendChild(newNode);
170 }
171 var div = document.getElementById("HBAutoCompleteBoxDiv");
172
173 SetDivStyle(div,obj);
174 }
175 function SetDivStyle(obj,txt)
176 {
177 if(!DivFormat)
178 {
179 obj.style.visibility = "hidden";
180 obj.style.overflow = "auto";
181 //obj.style.height = "100px";
182 obj.style.backgroundColor = backgroudcolor;
183 obj.style.fontFamily = "Arial";
184 obj.style.padding = "1px";
185 obj.style.border = "1px solid darkgreen";
186
187 obj.style.fontSize = "90%";
188 obj.style.position = "absolute";
189 obj.style.zIndex = "10000";
190
191 DivFormat = true;
192 }
193 var w = txt.offsetWidth;
194 var x=txt.offsetLeft;
195 var y=txt.offsetTop+txt.offsetHeight;
196 var parent = txt;
197 while(parent.offsetParent)
198 {
199 parent = parent.offsetParent;
200
201 x+=parent.offsetLeft;
202 y+=parent.offsetTop;
203 }
204 obj.style.left = x+"px";
205 obj.style.top = y+"px";
206 obj.style.width = w+"px";
207
208 }

2.源代码：

1 using System;
2 using System.Collections.Generic;
3 using System.ComponentModel;
4 using System.Text;
5 using System.Web;
6 using System.Web.UI;
7 using System.Web.UI.WebControls;
8 [assembly: WebResource("HBAutoCompleteTextBox.js", "application/x-javascript")]
9 namespace HBControl
10 {
11 [DefaultProperty("Text")]
12 [ToolboxData("<{0}:HBAutoCompleteTextBox runat=server></{0}:HBAutoCompleteTextBox>")]
13 public class HBAutoCompleteTextBox : TextBox
14 {
15
16 [Bindable(true),
17 Category("Appearance"),
18 Description("备选项")
19 ]
20 public string Items
21 {
22 get
23 {
24 string s = (string)ViewState["Items"];
25 return (s == null) ? string.Empty : s;
26 }
27 set
28 {
29 ViewState["Items"] = value;
30 }
31 }
32 protected override void OnPreRender(EventArgs e)
33 {
34 if (this.Page != null)
35 {
36 ClientScriptManager mgr = this.Page.ClientScript;
37 mgr.RegisterClientScriptResource(typeof(HBAutoCompleteTextBox), "HBAutoCompleteTextBox.js");
38 }
39 base.OnPreRender(e);
40 this.Attributes.Add("onkeyup", "AutoComplete('" + this.ClientID + "','"+this.Items+"');");
41 }
42 }
43 }
44
以上实现效果如下：



问题：
在按回车选择的时候，总是提交页面，很郁闷，还请高手指教！现在先用左右箭头键进行选择的。