可输可选下拉列表控件制作

.cs中代码
using System;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Data ;
using System.ComponentModel;
using System.Web.UI.WebControls;
using System.Drawing;

[assembly: TagPrefix("TextDropList", "kk")]
namespace TextDropList
{
    [ToolboxData(@"<{0}:TextDropList runat='server'></{0}:TextDropList>")]
    public class TextDropList : System .Web .UI .WebControls .TextBox
    {
        private DataTable dt=new DataTable ();
        private string mouseOverColor = "Gainsboro";
        private string mouseOutColor = "WhiteSmoke";
        private string listBackColor = "WhiteSmoke";
        private string listFontSize = "12px";
        private string listSelected = "false";
        private string listSelectedColor = "red";
        //private string listSelectText = "";

        private string valueString="";
        private string itemString="";
        private string image = "";
        private string width="0px";
        private string height = "0px";
        private string listSelectValue="";

        #region   属性

        //[BrowsableAttribute(true)]
        //[DescriptionAttribute("下拉列表字体大小")]
        //[DefaultValueAttribute("")]
        //[CategoryAttribute("Appearance")]

        // 获取或设置下拉列表高度
        [Category("自定义信息区")]
        [Browsable(true)]
        [Description("选种记录背景颜色")]
        [DefaultValue("")]
        public virtual string ListSelectedColor
        {
            get
            {
                return listSelectedColor;
            }
            set
            {
                listSelectedColor = value;
            }
        }

        // 获取或设置下拉列表高度
        [Category("自定义信息区")]
        [Browsable(true)]
        [Description("下拉列表字体大小")]
        [DefaultValue("")]
        public virtual string ListFontSize
        {
            get
            {
                return listFontSize;
            }
            set
            {
                listFontSize = value;
            }
        }

        // 获取或设置下拉列表背景颜色
        [Category("自定义信息区")]
        [Browsable(true)]
        [Description("下拉列表背景颜色")]
        [DefaultValue("")]
        public virtual string ListBackColor
        {
            get
            {
                return listBackColor;
            }
            set
            {
                listBackColor = value;
            }
        }

        // 获取或设置下拉列表鼠标经过时颜色
        [Category("自定义信息区")]
        [Browsable(true)]
        [Description("鼠标经过时颜色")]
        [DefaultValue("")]
        public virtual string MouseOverColor
        {
            get
            {
                return mouseOverColor;
            }
            set
            {
                mouseOverColor = value;
            }
        }

        // 获取或设置下拉列表鼠标离开时颜色
        [Category("自定义信息区")]
        [Browsable(true)]
        [Description("鼠标离开时颜色")]
        [DefaultValue("")]
        public virtual string MouseOutColor
        {
            get
            {
                return mouseOutColor;
            }
            set
            {
                mouseOutColor = value;
            }
        }

        // 获取或设置下拉列表图标路径
        [Category("自定义信息区")]
        [Browsable(true)]
        [Description("下拉列表图标路径")]
        [DefaultValue("")]
        public virtual string ListImgSrc
        {
            get
            {
                return image;
            }
            set
            {
                image = value;
            }
        }

        // 获取或设置下拉列表高度
        [Category("自定义信息区")]
        [Browsable(true)]
        [Description("下拉列表高度")]
        [DefaultValue("100px")]
        public virtual string ListHeight
        {
            get
            {
                return height;
            }
            set
            {
                height = value;
            }
        }

        // 获取或设置下拉列表宽度
        [Category("自定义信息区")]
        [Browsable(true)]
        [Description("获取或设置下拉列表宽度")]
        [DefaultValue("0px")]
        public virtual string ListWidth
        {
            get
            {
                return width;
            }
            set
            {
                width = value;
            }
        }

        // 获取或设置所选数据的value值
        [Category("自定义信息区")]
        [Browsable(true)]
        [Description("获取或设置下拉列表值")]
        [DefaultValue("")]
        public virtual string ListSelectValue
        {
            get
            {
                return listSelectValue;
            }
            set
            {
                listSelectValue = value;
            }
        }

        // 设置或获取DataTable类型数据集
        public DataTable GetDataTable
        {
            get
            {
                return dt;
            }
            set
            {
                dt = value;
            }
        }

        // 设置value的列名
        public string ValueString
        {
            set
            {
                valueString = value;
            }
        }

        // 设置显示数据的列名
        public string ItemString
        {
            set
            {
                itemString = value;
            }
        }
        #endregion

        //保存 listSelectValue
        protected override bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection)
        {
            this.ListSelectValue = Page.Request.Form["lstVal" + this.UniqueID];
            return base.LoadPostData(postDataKey, postCollection);
        }

        protected override void Render(HtmlTextWriter writer)
        {
            //填充下拉表
            writer.AddStyleAttribute(HtmlTextWriterStyle.Position, "absolute");
            writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none");
            writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, ListBackColor);
            writer.AddStyleAttribute(HtmlTextWriterStyle.FontSize, ListFontSize);
            writer.AddAttribute(HtmlTextWriterAttribute.Id, "TopDiv" + this.UniqueID);
            if (this.Width.ToString () =="")
                writer.AddStyleAttribute(HtmlTextWriterStyle.Width, ListWidth == "0px" ? "150px" : ListWidth);
            else
                writer.AddStyleAttribute(HtmlTextWriterStyle.Width, this .Width.ToString ());
            writer.AddStyleAttribute(HtmlTextWriterStyle.Height, ListHeight );
            writer.AddStyleAttribute(HtmlTextWriterStyle.OverflowY, "auto");
            writer.RenderBeginTag(HtmlTextWriterTag.Div );
            for (int i = 0; i <= dt.Rows.Count - 1; i++)
            {
                if (listSelectValue != "")
                {
                    if (listSelectValue == dt.Rows[i][valueString].ToString())
                    {
                        //
                        listSelected = "true";
                        this .Text = dt.Rows[i][itemString].ToString();
                    }
                    else
                    {
                        listSelected = "false";
                    }
                }
                else
                {
                    listSelected = "false";
                }
                writer.Write("<script language='javascript'>CreatDivItem('" + this.UniqueID + i.ToString() + "','" + this.ID + "','" + dt.Rows[i][itemString].ToString() + "','" + dt.Rows[i][valueString].ToString() + "','" + "lstVal" + this.UniqueID + "','" + MouseOverColor + "','" + MouseOutColor + "','" + listSelected + "');</script>");
            }
            writer.RenderEndTag();

            //输出textBox
            this.Attributes.Add("ListValue", "");
            AddTextChangeEvent(writer);
            //设置txtBox宽度和下拉表一致
            writer.AddStyleAttribute(HtmlTextWriterStyle.Width, ListWidth == "0px" ? "150px" : ListWidth);
            base.Render(writer);

            //下拉铵钮
            writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "2px");
            writer.AddStyleAttribute(HtmlTextWriterStyle.BorderColor, "Red");
            writer.AddStyleAttribute(HtmlTextWriterStyle.Height, this.Height.ToString ( ));
            writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "20px");
            writer.AddAttribute(HtmlTextWriterAttribute.Onclick, "ShowItem('TopDiv" + this.UniqueID + "','" + this.ID + "','" + "img" + this.UniqueID + "','" + this.ListSelectedColor + "');");
            writer.AddAttribute(HtmlTextWriterAttribute.Id, "img" + this.UniqueID );
            writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, ListImgSrc);
            if (this.Enabled == false)
                writer.AddAttribute(HtmlTextWriterAttribute.Disabled, "disabled");
            writer.RenderBeginTag(HtmlTextWriterTag.Button );
            writer.RenderEndTag();

            //保存 ListSelectValue值
            AddSaveValue(writer);
        }

        protected void AddTextChangeEvent(HtmlTextWriter writer)
        {
            this.Attributes.Add("onpropertychange", "TxtChanged('TopDiv" + this.UniqueID + "','" + this.ID + "','" + "img" + this.UniqueID + "');");
        }

        protected void AddSaveValue(HtmlTextWriter writer)
        {
            //保存 ListSelectValue值
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "hidden");
            writer.AddAttribute(HtmlTextWriterAttribute.Name, "lstVal" + this.UniqueID);
            writer.AddAttribute(HtmlTextWriterAttribute.Id, "lstVal" + this.UniqueID);
            writer.AddAttribute(HtmlTextWriterAttribute.Value, listSelectValue);
            writer.RenderBeginTag(HtmlTextWriterTag.Input);
            writer.RenderEndTag();
        }

        protected override void OnPreRender(EventArgs e)
        {
            //输出脚本
            Page.ClientScript .RegisterClientScriptBlock(GetType(),"kkScript", ScriptSrouce.kkScript);
            base.OnPreRender(e);
        }

        //private string overFlowY;
        //[Bindable(true)]
        //[Category("自定义信息区")]
        //[Browsable(true)]
        //[Description("验证数据类型，默认为不验证")]
        //[DefaultValue("IntPostive")]
        //public OverFlowYEnum OverFlowY
        //{
        //    get { return (string)OverFlowYEnum; }
        //    set { overFlowY = value.ToString(); }
        //}
    }

    //public enum OverFlowYEnum
    //{
    //    visible,
    //    auto,
    //    hidden,
    //    scroll
    //}
} 

资源文件中的javascript
<script language ="javascript" type ="text/javascript" >
 var itemsID="";
 var txtBoxsID="";
 var imgsID="";
    function ShowItem(itemID,txtBoxID,imgID,selectedColor)
    {
     if(txtBoxsID==txtBoxID)
     {
     }
     else
     {
      if(txtBoxsID != "")
      {
          document.getElementById(itemsID).style.display="none";
      }
     }

     itemsID=itemID;
     txtBoxsID=txtBoxID;
     imgsID=imgID;

  for(i=0;i<document.all.tags("div").length;i++)
  {
   if (LeftStr(document.all.tags("div")[i].id,txtBoxID.length) == txtBoxID)
   {     if(document.all.tags("div")[i].isSelect=="true")
     { document.all.tags("div")[i].style.backgroundColor=selectedColor;}
    if(LeftStr(document.all.tags("div")[i].innerText,document.getElementById(txtBoxID).value.length)!=(document.getElementById(txtBoxID).value))
    {
     document.all.tags("div")[i].style.display="";
    }
   }
  }

     document.getElementById(itemID).style.display="";
     document.getElementById(itemID).style.left=document.getElementById(txtBoxID).offsetLeft+10;
     document.getElementById(itemID).style.top=document.getElementById(txtBoxID).offsetTop+35;
    }
 function CreatDivItem(itemDivID,txtID,divStr,divTitle,listValues,mouseOverColor,mouseOutColor,isSelected)
 {
  document.write("<div id=" + itemDivID + " isSelect=" + isSelected + " style='cursor :hand' οnmοuseοver='style.backgroundColor=/"" + mouseOverColor + "/"' οnmοuseοut='style.backgroundColor=/"" + mouseOutColor + "/";if(this.isSelect==/"true/"){this.style.backgroundColor=/"red/";};' SelectValue=" + divTitle + "  οnclick='document.getElementById(/"" + txtID + "/").value=this.innerText; document.getElementById(/"" + txtID + "/").ListValue=this.SelectValue; document.getElementById(/"" + listValues + "/").value=document.getElementById(/"" + txtID + "/").ListValue; '>" + divStr+ "</div>");
 }
 function LeftStr(str,len)
 {
  return   str.substr(0,len);
 }

 function TxtChanged(itemID,txtBoxID,imgID)
 {
       itemsID=itemID;
     txtBoxsID=txtBoxID;
     imgsID=imgID;
  document.getElementById(itemID).style.display="";
      document.getElementById(itemID).style.left=document.getElementById(txtBoxID).offsetLeft+10;
      document.getElementById(itemID).style.top=document.getElementById(txtBoxID).offsetTop+35;
  for(i=0;i<document.all.tags("div").length;i++)
  {
   if (LeftStr(document.all.tags("div")[i].id,txtBoxID.length) == txtBoxID)
   {
    if(LeftStr(document.all.tags("div")[i].innerText,document.getElementById(txtBoxID).value.length)!=(document.getElementById(txtBoxID).value))
    {
     document.all.tags("div")[i].style.display="none";
    }
    else
    { document.all.tags("div")[i].style.display="";}
   }
  }
 }
 function HideItem()
 {
  var IDStr = event.srcElement.id;
  if(itemsID == "")
  {return;}
  if(IDStr ==imgsID)
  {
   document.getElementById(itemsID).style.display="";
  }
  else
  {
   document.getElementById(itemsID).style.display="none";
  }
 }
    document.οnclick=HideItem;
</script>

IE 和 maxthon中可用 下拉位置还有点问题