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

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

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

下面是我刚做一个类似于那样的控件.如下图：

1.js

 

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&&currentIndex<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 

以上实现效果如下：

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