可输入的DropDownList(VS2005 C#)

 

用一个TextBox控件和一个DropDownList控件通过DIV的分层显示可以实现可以输入的DropDownList。

HTML代码：

<div  style="WIDTH: 175px ; POSITION: absolute ; "align="center"  >
   <asp:TextBox ID="txt" runat="server" Width="155px" Height="15px" ></asp:TextBox></div>
<div  style="WIDTH: 175px; POSITION: absolute ;   CLIP: rect(2px 280px 21px 155px); " align="center">
   <asp:DropDownList ID="ddl"  runat ="server"  Width="172px" Height="25px"  ></asp:DropDownList></div>

在设置控件的宽度的时候要保证CLIP的最后一个参数要大于或等于TEXTBOX的宽度，以保证TEXTBOX控件的全部显示

也可以用自定义控件实现：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.Web.UI.Design;
using System.Data;

namespace Asset.WebControls
...{
    [ToolboxData("<{0}:CDropDownList runat=server></{0}:CDropDownList>")]
    public class CDropDownList : WebControl
    ...{
        private DataTable _ddlSource;//DROPDOWNLIST数据源
       public DropDownList _DropDownList;//用于选择的DROPDownList
        public TextBox _TextBox;//用于属于的TEXTBOX
        private int _divWidth =175;//控件的宽度


        protected override void OnLoad(EventArgs e)
        ...{
            _values = new Hashtable();
            _DropDownList = new DropDownList();
            _DropDownList.DataSource = _ddlSource;
            _DropDownList.DataTextField = "name";//可用属性来获取
            _DropDownList.DataValueField = "key";//可用属性来获取
            _DropDownList.DataBind();
            _DropDownList.AutoPostBack = true;
            _DropDownList.SelectedIndexChanged += new EventHandler(DropDownList_SelectedIndexChanged);
            _TextBox = new TextBox();
            _TextBox.TextChanged += new EventHandler(TextBox_TextChanged);
            Controls.Add(_TextBox);
            Controls.Add(_DropDownList);
            base.OnLoad(e);
        }
//提供一个TEXTBOX的值改变时响应的方法。
        public event EventHandler TXTTextChanged;
        protected void OnTXTTextChanged(EventArgs e)
        ...{
            TXTTextChanged(this, e);
        }

        private void TextBox_TextChanged(object sender, EventArgs e)
        ...{
            OnTXTTextChanged(EventArgs.Empty);
        }
//提供一个DROPDOWNLIST的值改变时响应的方法。
        public event EventHandler DDLSelectedIndexChanged;
        protected void OnDDLSelectedIndexChanged(EventArgs e)
        ...{
            DDLSelectedIndexChanged(this, e);
        }

        private void DropDownList_SelectedIndexChanged(object sender, EventArgs e)
        ...{
            OnDDLSelectedIndexChanged(EventArgs.Empty);
        }

        public DataTable ddlSource
        ...{
            get
            ...{
                return _ddlSource;
            }
            set
            ...{
                _ddlSource = value;
            }
        }

        public int  divWidth
        ...{
            get
            ...{
                return _divWidth;
            }
            set
            ...{
                _divWidth = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter output)
        ...{
            string dwidth = _divWidth.ToString() + "px";
            string twidth = (_divWidth - 20).ToString() + "px";
            output.Write("<div  style="WIDTH: " + dwidth + " ; POSITION: absolute ; " align='center'  >");
            _TextBox.Width = Unit.Parse(twidth);
            _TextBox.RenderControl(output);
            output.Write("</div>");
            output.Write("<div  style="WIDTH: " + dwidth + " ; POSITION: absolute ; CLIP: rect(2px 280px 21px " + twidth + "); " align='center'  >");
            _DropDownList.Width = Unit.Parse(dwidth);
            _DropDownList.RenderControl(output);
            output.Write("</div>");           
        }
    }
}

 

以上实现的原理就是利用DIV的分层显示。以达到控件显示顺序及重叠显示

关于DropDownList与TextBox的值交互可以看另一篇文章

 

 

从DropDownList到TextBox,也就是当DropDownList选择时，把DropDownList的TEXT或VALUE值赋给TEXTBOX

//ddl是dropdownlist控件的名称，txt是textbox控件的名称
//把dropdownlist的Text值赋给TEXTBOX
function DdlSelectedTextToTxt(ddl,txt)
...{
    document.all(txt).value=document.all(ddl).options[document.all(ddl).selectedIndex].text;
    return false;
}
//把dropdownlist的VALUE值赋给TEXTBOX
function DdlSelectedTextToTxt(ddl,txt)
...{
    document.all(txt).value=document.all(ddl).options[document.all(ddl).selectedIndex].value;
    return false;
}

把方法绑定到 DropDownList的onchange事件上

ddl.Attributes.Add("onchange", "return DdlSelectedTextToTxt('" + ddl.ClientID + "','" + txt.ClientID + "')");

从TextBox到DropDownList,也就是当textbox的值改变时，从DropDownList的text或value中查找最相近的值（下面的代码只是在DropDownList的text中查找），并把DropDownList的TEXT或VALUE值赋给TEXTBOX。

1.先比较textbox与dropdownlist的值

 //返回值:bool, ddl所有项与txt.text值进行匹配,若找到返回true,否则返回false
 function Match_DdlToTxt(txt,ddl)
 ...{
     var returnValue=false;
     var txtValue=document.all(txt).value;
     for( i=0;i<document.all(ddl).options.length;i++)
     ...{
         if(IsMatch(txtValue,document.all(ddl).options[i].text)==true)
         ...{
            document.all(txt).value=document.all(ddl).options[i].text;
            document.all(ddl).options[i].selected=true;
            returnValue= true;
            break;
         }
     }  
    return returnValue; 
} 
//返回值:bool,匹配sValue1与sValue2项,sValue2是否包含sValue1,包含返回true,否则返回false
function IsMatch(sValue1,sValue2)
...{
    var index=sValue2.indexOf(sValue1);
    if(index>=0)
    ...{
        return true;
    }
       return false;
} 

2.设置当textbox中输入是回车键时响应比较查询事件

function ChkKeyEnterDdl(txt,ddl) 
...{
    if(event.keyCode==13)
    ...{    
       if(Match_DdlToTxt(txt,ddl)==false)
       ...{
          alert("数据不匹配！");
       }
       return false;
    }
}

3.把方法绑定到textbox的onkeypress事件或onkeydown事件上

TextBox1.Attributes.Add("onkeydown", "return ChkKeyEnterDdl('" + txt.ClientID + "','" + ddl.ClientID + "')");

或

TextBox1.Attributes.Add("onkeypress", "return ChkKeyEnterDdl('" + txt.ClientID + "','" + ddl.ClientID + "')");