本文主要是介绍可输入的Web下拉列表框控件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
vs2005提供的web下拉列表框 不支持输入，只能选择，我们可以继承该控件来支持输入功能，实现的原理很简单，就是增加一个textbox控件叠加在下拉列表框上，客户端通过脚本来同步这两个控件的值，先看看服务端代码：
using System; using System.Collections.Generic; using System.Text; using System.Collections; using System.Web.UI.WebControls; using System.ComponentModel; using System.Text.RegularExpressions; using System.Drawing; using System.Web.UI; namespace Weiky.Web.Control
... {
public class WeikyWebDropDownList : DropDownList
...{ private TextBox _textBox; private Label _label; public WeikyWebDropDownList() ...{ _textBox = new TextBox(); _label = new Label(); Caption = "标签"; SetFont(9, "宋体"); if (this.Parent != null) ...{ this.Parent.Controls.Add(_textBox);
} } 客户端事件#region 客户端事件 [CategoryAttribute("客户端事件")] [DisplayNameAttribute("Change")] public string Change ...{ get ...{ object o = ViewState["Change"]; return ((o == null) ? "" : (string)o); } set ...{ ViewState["Change"] = value; } } [CategoryAttribute("客户端事件")] [DisplayNameAttribute("Blur")] public string Blur ...{ get ...{ object o = ViewState["Blur"]; return ((o == null) ? "" : (string)o); } set ...{ ViewState["Blur"] = value; } } [CategoryAttribute("客户端事件")] [DisplayNameAttribute("Focus")] public string Focus ...{ get ...{ object o = ViewState["Focus"]; return ((o == null) ? "" : (string)o); } set ...{ ViewState["Focus"] = value; } } [CategoryAttribute("客户端事件")] [DisplayNameAttribute("KeyDown")] public string KeyDown ...{ get ...{ object o = ViewState["KeyDown"]; return ((o == null) ? "" : (string)o); } set ...{ ViewState["KeyDown"] = value; } } [CategoryAttribute("客户端事件")] [DisplayNameAttribute("KeyUp")] public string KeyUp ...{ get ...{ object o = ViewState["KeyUp"]; return ((o == null) ? "" : (string)o); } set ...{ ViewState["KeyUp"] = value; } } [CategoryAttribute("客户端事件")] [DisplayNameAttribute("KeyPress")] public string KeyPress ...{ get ...{ object o = ViewState["KeyPress"]; return ((o == null) ? "" : (string)o); } set ...{ ViewState["KeyPress"] = value; } } #endregion public void SetFont(int size, string name) ...{ _label.Font.Name = name; _label.Font.Size = size; } 公共属性#region 公共属性 public override Unit Width ...{ get ...{ return Unit.Pixel((int)(base.Width.Value + _label.Width.Value)); } set ...{ base.Width = Unit.Pixel((int)(TextwidthScale * value.Value)); if (Editable && base.Width.Value > 18) ...{ _textBox.Width = Unit.Pixel((int)(base.Width.Value - 18)); } _label.Width = Unit.Pixel((int)(value.Value * (1 - TextwidthScale))); } } public int Left ...{ get ...{ return ControlBase.AbstractIntFromString(Style.Value,"Left"); } set ...{ Style.Remove(System.Web.UI.HtmlTextWriterStyle.Left); Style.Add("Left", string.Format("{0}px", value)); } } public int Top ...{ get ...{ return ControlBase.AbstractIntFromString(Style.Value,"Top"); } set ...{ Style.Remove(System.Web.UI.HtmlTextWriterStyle.Top); Style.Add("Top", string.Format("{0}px", value)); } } public override int SelectedIndex ...{ get ...{ return base.SelectedIndex; } set ...{ base.SelectedIndex = value; if (Editable && SelectedItem != null) ...{ _textBox.Text = SelectedItem.Text; } } } [Category("外观")] [DefaultValue("标题")] [DisplayNameAttribute("标题")] public string Caption ...{ get ...{ return Regex.Match(_label.Text, "/(? .*)/ ").Result("$1"); } set ...{ _label.Text = string.Format("{0}", value); } } [Category("外观")] [DefaultValue("标题的颜色")] [DisplayNameAttribute("标题的颜色")] public Color LabelColor ...{ get ...{ return _label.ForeColor; } set ...{ _label.ForeColor = value; } } [CategoryAttribute("外观")] [DisplayNameAttribute("录入框长度比例")] [Description("录入框占整个控件的长度的比例。")] public float TextwidthScale ...{ get ...{ object o = ViewState["TextwidthScale"]; return ((o == null) ? (float)0.67 : (float)o); } set ...{ ViewState["TextwidthScale"] = value; SetChildControlWidth(); } } [CategoryAttribute("行为")] [DisplayNameAttribute("是否可编辑")] [Description("控件是否可编辑")] public bool Editable ...{ get ...{ object o = ViewState["Editable"]; return ((o == null) ? false : (bool)o); } set ...{ ViewState["Editable"] = value; if (value && base.Width.Value > 18) ...{ _textBox.Width = Unit.Pixel((int)(base.Width.Value - 18)); } } } private void SetChildControlWidth() ...{ _label.Width = Unit.Pixel((int)((1 - TextwidthScale) * Width.Value)); } #endregion protected override void Render(System.Web.UI.HtmlTextWriter output) ...{ output.WriteBeginTag("Table"); output.WriteAttribute("style", string.Format("width:{0}px;z-index:1;position:absolute;Left:{1}px;Top:{2}px", Width.Value, Left,Top)); output.WriteAttribute("cellspacing", "0"); output.WriteAttribute("cellpadding", "0"); output.Write(HtmlTextWriter.TagRightChar); output.WriteBeginTag("Tr"); output.WriteAttribute("Nowrap", "true"); output.Write(HtmlTextWriter.TagRightChar); output.WriteBeginTag("Td"); output.WriteAttribute("valign", "baseline"); output.WriteAttribute("align", "left"); output.WriteAttribute("width", ((1 - TextwidthScale) * 100).ToString() + "%"); output.Write(HtmlTextWriter.TagRightChar); _label.RenderControl(output); output.WriteEndTag("Td"); output.WriteBeginTag("Td"); output.WriteAttribute("width", (TextwidthScale * 100).ToString() + "%"); output.Write(HtmlTextWriter.TagRightChar); if (Change != "") ...{ Attributes.Add("onchange", Editable ? "DropDownList_OnChange('" + ClientID + "',this);" + Change : Change); } else if(Editable) ...{ Attributes.Add("onchange", "DropDownList_OnChange('" + ClientID + "',this)"); } base.Render(output); if (Editable) ...{ _textBox.ID = ClientID + "_inputControl"; _textBox.Style.Clear(); _textBox.Style.Add("POSITION", "absolute"); _textBox.Style.Add("MARGIN-LEFT", "-" + base.Width); _textBox.Style.Add("width", _textBox.Width.ToString()); if (Blur != "") ...{ _textBox.Attributes.Add("onblur", "DropDownList_OnInputBlur('" + ClientID + "',this);" + Blur); } else ...{ _textBox.Attributes.Add("onblur", "DropDownList_OnInputBlur('" + ClientID + "',this)"); } if (KeyDown != "") ...{ _textBox.Attributes.Add("onkeydown", KeyDown); } if (KeyUp != "") ...{ _textBox.Attributes.Add("onkeyup", KeyUp); } if (KeyPress != "") ...{ _textBox.Attributes.Add("onkeypress", KeyPress); } if (Focus != "") ...{ _textBox.Attributes.Add("onfocus", Focus); } _textBox.RenderControl(output); } output.WriteEndTag("Td"); output.WriteEndTag("Tr"); output.WriteEndTag("Table"); } public void SetTextBoxValue(string value) ...{ if (_textBox != null) ...{ _textBox.Text = value; } } }
}
这个控件还包括前缀标签，说明该控件的名称，组合成一个完整的控件。
客户端通过两个脚本函数同步输入框控件和下拉框控件的值：
function DropDownList_OnChange(id,theControl) ... { document.all(theControl.id + '_inputControl').value = DropDownList_GetText(theControl);} function DropDownList_OnInputBlur(id,theInput) ... { var theControl = GetControlByName('8',id); var isRela = theControl.attributes.getNamedItem('isRela'); if(isRela) return; var valueIsValid = false; for(var i=0;i<theControl.children.length;i++) ...{ if(theInput.value == theControl.children[i].value || theControl.children[i].innerText.indexOf(theInput.value) > -1) ...{ theControl.children[i].selected = true; theInput.value = theControl.children[i].innerText; valueIsValid = true; break; } } if(!valueIsValid) ...{ theInput.style.color = 'red'; } else ...{ theInput.style.color = 'black'; }} 这篇关于可输入的Web下拉列表框控件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
